@charset "UTF-8";
/* 1. 모든 요소의 여백 초기화 및 박스 사이징 설정 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 패딩과 테두리가 너비에 포함되도록 설정 */
}

/* 2. HTML, Body 기본 설정 */
html {
  font-size: 16px; /* 기본 폰트 크기 */
  -webkit-text-size-adjust: 100%; /* iOS에서 가로 모드 시 폰트 크기 변동 방지 */
  scroll-behavior: smooth;
}

body {
  border: none;
  font-family: "Inter", sans-serif;
  background-color: #F9F8F4;
  color: #1a1a1a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* 글꼴을 부드럽게 렌더링 */
}

/* 3. 리스트 스타일 제거 */
ol, ul, li {
  list-style: none;
}

/* 4. 링크 스타일 초기화 */
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a:visited {
  color: #1a1a1a;
}
a:hover {
  color: rgb(228, 5, 72);
}
a:active {
  color: #1a1a1a;
}

/* 5. 이미지 및 미디어 최적화 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%; /* 부모 너비를 넘지 않도록 설정 */
  height: auto;
}

/* 6. 폼 요소 초기화 */
input, button, textarea, select {
  font: inherit; /* 부모의 폰트 설정 상속 */
  border: none;
  background: transparent;
  outline: none;
}

button {
  cursor: pointer;
}

/* 7. 테이블 초기화 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 커졌다 작아지며 네온(오렌지색색) 효과가 나타나는 키프레임 */
@keyframes neonPulseOrenge {
  0%, 100% {
    transform: scale(1);
    /* 원래 크기 */
    text-shadow: 0 0 0px rgba(255, 255, 255, 0);
    /* 그림자 없음 */
  }
  50% {
    transform: scale(1.01);
    /* 5% 정도 약간 커짐 */
    /* 네온 불빛 효과: 여러 겹의 그림자로 은은한 광채 표현 */
    text-shadow: 0 0 0.5rem rgba(255, 165, 0, 0.3), 0 0 0.9375rem rgba(255, 140, 0, 0.5), 0 0 1.5625rem rgba(255, 165, 0, 0.2);
    /* 멀리 퍼지는 잔광 */
    color: #C5A059;
    /* 커질 때 글자색을 약간 더 진하게 하여 대비 강화 */
  }
}
/* 커스텀 툴팁에 적용됨. 툴팀 페이드인 후 페이드 아웃 */
@keyframes fadeAfter5s {
  0% {
    opacity: 0;
  }
  /* 0초 ~ 0.5초: 페이드 인 (전체 시간의 약 9%) */
  9% {
    opacity: 1;
  }
  /* 0.5초 ~ 5초: 나타난 상태 유지 (전체 시간의 약 90%) */
  90% {
    opacity: 1;
    transform: translate(-5%, 20%);
  }
  /* 5초 ~ 5.5초: 페이드 아웃 */
  100% {
    opacity: 0;
    transform: translate(-5%, -10px);
    /* 사라질 때 살짝 위로 올라가는 효과 */
    display: none;
  }
}
/* Hero 배경에 적용됨. 백그라운드의 옅은 컬러를 숨쉬는듯한 느낌으로 적용 */
@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}
/* Leader section의 팝업에 적용됨. */
@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 서브페이지 내용부분의 각 타이틀 밑의 오렌지 라인 애니메이션 */
@keyframes lineGrow {
  from {
    width: 0;
  }
  to {
    width: 3.75rem;
  }
}
/* hero title Keyframe Animations */
@keyframes letterRotate {
  0% {
    opacity: 0;
    color: #fff;
    transform: rotateY(90deg);
  }
  50% {
    opacity: 1;
    color: #1c1917;
    transform: rotateY(45deg);
  }
  100% {
    opacity: 1;
    color: #1c1917;
    transform: rotateY(0deg);
  }
}
@keyframes titleFlash {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(3) drop-shadow(0 0 20px rgb(252, 252, 252));
  }
  100% {
    filter: brightness(1);
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 3rem;
}
@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }
}

h2 {
  font-size: 2.25rem;
}
@media (max-width: 768px) {
  h2 {
    font-size: 1.875rem;
  }
}

h3 {
  font-size: 1.5rem;
}

p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.tooltipMsgBox {
  position: fixed;
  display: none;
  pointer-events: none;
  background-color: #fff;
  color: #C5A059;
  border: 0.125rem solid #C5A059;
  padding: 0.5rem 0.9375rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
  z-index: 9999;
  /* 상단 가운데를 커서에 맞추기 위해 기준점 변경 */
  transform: translate(-5%, 20%);
  opacity: 0;
  /* 따라다니는 효과를 위해 위치 transition은 제거하고 opacity만 남깁니다 */
  transition: opacity 0.2s ease;
}
.tooltipMsgBox.active {
  display: block;
  opacity: 1;
  /* 5.5초 동안 한 번만 실행 (0.5초 페이드인 + 4.5초 유지 + 0.5초 페이드아웃) */
  animation: fadeAfter5s 5.5s forwards;
}

.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: #C5A059;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 0.75rem rgba(197, 160, 89, 0.3);
}
.scroll-top:hover {
  background: #b8934a;
  transform: translateY(-5px);
  box-shadow: 0 0.375rem 1.25rem rgba(197, 160, 89, 0.4);
}
.scroll-top.scroll-top-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: #fff;
  transition: transform 0.3s ease;
}
.scroll-top:hover svg {
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .scroll-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
  }
  .scroll-top svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.container {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* 공통 스타일 */
.scroll-hidden {
  opacity: 0;
  transform: translateY(1.875rem);
  transition: all 1s ease;
}

.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}

.drop-cap {
  font-size: 3.75rem;
  float: left;
  margin-right: 0.75rem;
  margin-top: -0.5rem;
  font-family: "Playfair Display", sans-serif;
  color: #C5A059;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: all 0.3s ease;
  padding: 1rem 0;
  /* background: transparent; */
  background: #fff;
}
nav.scrolled {
  background: rgba(249, 248, 244, 0.9);
  backdrop-filter: blur(0.625rem);
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
  padding: 0.75rem 0;
}
nav .nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .nav-container .logo-section {
  display: flex;
  align-items: center;
  cursor: pointer;
}
nav .nav-container .logo-section img {
  height: 3.75rem;
  transition: transform 0.8s ease-in-out;
}
@media (max-width: 768px) {
  nav .nav-container .logo-section img {
    height: 2.5rem;
  }
}
nav .nav-container .logo-section .logo-text {
  font-family: "Playfair Display", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
}
nav .nav-container .logo-section .logo-text span {
  display: inline-block;
}
nav .nav-container .logo-section .logo-text span .sf {
  font-size: 0.875rem;
}
@media (max-width: 768px) {
  nav .nav-container .logo-section .logo-text {
    font-size: 0.875rem;
  }
}
nav .nav-container .logo-section:hover img {
  transform: rotateY(360deg);
  backface-visibility: visible;
  filter: brightness(0) invert(0.6);
}
nav .nav-container .logo-section:hover .logo-text {
  /* 애니메이션 적용: 3초 동안 무한히 부드럽게 반복 */
  animation: neonPulseOrenge 2.5s infinite ease-in-out;
  /* 왼쪽을 기준으로 커지게 설정 (로고 옆이므로) */
  transform-origin: left center;
}
nav .nav-container .gnb {
  display: none;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #524d4a;
  /* 드롭다운 메뉴 */
}
@media (max-width: 1080px) {
  nav .nav-container .gnb {
    gap: 0.3rem;
    font-size: 0.8125rem;
  }
}
@media (min-width: 1080px) {
  nav .nav-container .gnb {
    gap: 1rem;
    font-size: 0.875rem;
  }
}
@media (min-width: 1160px) {
  nav .nav-container .gnb {
    gap: 2rem;
  }
}
@media (min-width: 990px) {
  nav .nav-container .gnb {
    display: flex;
  }
}
nav .nav-container .gnb a {
  color: #524d4a;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
nav .nav-container .gnb a:hover {
  color: #C5A059;
}
nav .nav-container .gnb .login-btn {
  padding: 0.5rem 1.25rem;
  background: #1a1a1a;
  color: #fff;
  border-radius: 624.9375rem;
  transition: background 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
nav .nav-container .gnb .login-btn:hover {
  border: 1px solid #C5A059;
  color: #C5A059;
  backdrop-filter: blur(0.25rem);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.18);
}
nav .nav-container .gnb .login-btn:hover a {
  color: #C5A059;
}
nav .nav-container .gnb .login-btn a {
  color: #fff;
  text-decoration: none;
  text-transform: none;
  transition: color 0.3s ease;
}
nav .nav-container .gnb .login-btn a:hover {
  font-weight: 700;
  color: #914c3b;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
}
nav .nav-container .gnb .login-btn a:hover ~ a {
  color: #C5A059;
}
nav .nav-container .gnb .dropdown-menu {
  position: relative;
}
nav .nav-container .gnb .dropdown-menu .dropdown-content {
  position: absolute;
  top: 100%;
  left: -50%;
  margin-top: 0.5rem;
  white-space: nowrap;
  background: #fff;
  border: 0.0625rem solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}
nav .nav-container .gnb .dropdown-menu .dropdown-content a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: #57534e;
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f5f5f4;
  border-radius: 0.5rem;
  text-transform: none;
}
nav .nav-container .gnb .dropdown-menu .dropdown-content a:last-child {
  border-bottom: none;
}
nav .nav-container .gnb .dropdown-menu .dropdown-content a:hover {
  background-color: #f9fafb;
  color: #C5A059;
  padding-left: 1.5rem;
}
nav .nav-container .gnb .dropdown-menu:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
nav .nav-container #menu-btn {
  display: block;
  color: #1c1917;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
nav .nav-container #menu-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: all 0.3s ease;
}
nav .nav-container #menu-btn svg line {
  transition: all 0.3s ease;
  transform-origin: center;
}
nav .nav-container #menu-btn.active svg line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 1px);
}
nav .nav-container #menu-btn.active svg line:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}
nav .nav-container #menu-btn.active svg line:nth-child(3) {
  transform: rotate(-45deg) translate(-1px, -1px);
}
@media (min-width: 990px) {
  nav .nav-container #menu-btn {
    display: none;
  }
}
@media (min-width: 990px) {
  nav {
    padding: 1.5rem 0;
  }
  nav.scrolled {
    padding: 1rem 0;
  }
}
@media (max-width: 768px) {
  nav {
    padding: 0.75rem 0;
  }
  nav.scrolled {
    padding: 0.5rem 0;
  }
}

#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #F9F8F4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6.25rem;
  gap: 1.5rem;
  font-size: 1.25rem;
  font-family: "Playfair Display", sans-serif;
  overflow-y: auto;
}
#mobile-menu.show {
  display: flex;
}
#mobile-menu .mobile-menu-item {
  width: 100%;
  max-width: 18.75rem;
  text-align: center;
}
#mobile-menu .mobile-menu-item .mobile-link {
  color: #1a1a1a;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
  display: block;
  padding: 12px 20px;
  position: relative;
}
#mobile-menu .mobile-menu-item .mobile-link:hover {
  color: #C5A059;
}
#mobile-menu .mobile-menu-item .mobile-link.has-submenu::after {
  content: "+";
  position: absolute;
  right: 20px;
  transition: transform 0.3s ease;
}
#mobile-menu .mobile-menu-item .mobile-link.has-submenu.active::after {
  transform: rotate(45deg);
}
#mobile-menu .mobile-menu-item .mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}
#mobile-menu .mobile-menu-item .mobile-submenu.show {
  max-height: 31.25rem;
}
#mobile-menu .mobile-menu-item .mobile-submenu a {
  display: block;
  padding: 0.625rem 1.25rem;
  color: #524d4a;
  text-decoration: none;
  font-size: 1rem;
  text-transform: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#mobile-menu .mobile-menu-item .mobile-submenu a:last-child {
  border-bottom: none;
}
#mobile-menu .mobile-menu-item .mobile-submenu a:hover {
  color: #C5A059;
  padding-left: 1.75rem;
}
@media (min-width: 768px) {
  #mobile-menu .mobile-menu-item {
    display: none !important;
  }
}
#mobile-menu .login-btn {
  padding: 0.5rem 1.25rem;
  background: #1a1a1a;
  color: #fff;
  border-radius: 624.9375rem;
  transition: background 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
#mobile-menu .login-btn:hover {
  border: 1px solid #C5A059;
  color: #C5A059;
  backdrop-filter: blur(0.25rem);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.18);
}
#mobile-menu .login-btn:hover a {
  color: #C5A059;
}
#mobile-menu .login-btn span {
  display: block;
  white-space: nowrap;
}
#mobile-menu .login-btn a {
  color: #fff;
  text-decoration: none;
  text-transform: none;
  transition: color 0.3s ease;
}
#mobile-menu .login-btn a:hover {
  font-weight: 700;
  color: #914c3b;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
}
#mobile-menu .login-btn a:hover ~ a {
  color: #C5A059;
}

main {
  /* 서브페이지 히어로 섹션 */
}
main section {
  padding: 4rem 0;
}
main .sub-hero {
  position: relative;
  height: 45vh;
  max-height: 500px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}
main .sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=1920&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}
main .sub-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(240, 238, 230, 0.8) 0%, rgba(249, 248, 244, 0.1) 100%);
  z-index: 1;
}
main .sub-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
  /* 테블릿 사이즈 (990px 이상) */
}
@media (min-width: 990px) {
  main .sub-hero-content {
    margin-top: 2%;
  }
}
main .sub-hero-badge {
  display: inline-block;
  margin-bottom: 0.875rem;
  padding: 0.25rem 1rem;
  border: 0.0625rem solid #C5A059;
  color: #C5A059;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 624.9375rem;
  backdrop-filter: blur(0.25rem);
  background: #fff;
}
main .sub-hero-title {
  font-family: "Playfair Display", sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #1c1917;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
main .sub-hero-title .letter {
  display: inline-block;
  opacity: 0;
  color: #fff;
  transform: rotateY(90deg);
  animation: letterRotate 0.3s ease-out forwards;
}
main .sub-hero-title.complete {
  animation: titleFlash 0.8s ease-out;
}
@media (min-width: 768px) {
  main .sub-hero-title {
    font-size: 3.375rem;
  }
}
@media (min-width: 1024px) {
  main .sub-hero-title {
    font-size: 4.5rem;
  }
}
main .sub-hero-description {
  max-width: 672px;
  margin: 0 auto;
  font-size: 18px;
  color: #44403c;
  font-weight: 300;
  line-height: 1.7;
}

footer {
  background: #1a1a1a;
  color: #a8a29e;
  padding: 4rem 0;
}
footer .footer-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
footer .footer-content .footer-info {
  display: flex;
  align-items: center;
  /* 이미지와 텍스트의 세로 중앙 정렬 */
  gap: 1rem;
  /* 로고와 텍스트 사이의 간격 */
  text-align: left;
  /* 텍스트 왼쪽 정렬 */
  cursor: pointer;
}
footer .footer-content .footer-info .footer-logo-img {
  height: 4.375rem;
  /* 로고 크기 (취향에 따라 조절) */
  width: auto;
  filter: brightness(0) invert(1);
  /* 어두운 배경을 위한 흰색 반전 */
  flex-shrink: 0;
  /* 화면이 좁아져도 이미지가 찌그러지지 않게 방지 */
  transition: transform 0.8s ease-in-out;
}
footer .footer-content .footer-info:hover .footer-logo-img {
  transform: rotateY(360deg);
  backface-visibility: visible;
  filter: brightness(0) invert(0.8);
}
footer .footer-content .footer-info:hover .footer-logo {
  /* 애니메이션 적용: 3초 동안 무한히 부드럽게 반복 */
  animation: neonPulseOrenge 2.5s infinite ease-in-out;
  /* 왼쪽을 기준으로 커지게 설정 (로고 옆이므로) */
  transform-origin: left center;
}
footer .footer-content .footer-info .footer-text-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* 텍스트 줄 간격 */
}
footer .footer-content .footer-info .footer-text-group .footer-logo {
  color: #fff;
  font-family: "Playfair Display", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0;
  /* flex 간격 조절을 위해 기존 마진 제거 */
}
footer .footer-content .footer-info .footer-text-group .footer-desc {
  font-size: 0.875rem;
  margin: 0;
}
footer .footer-content .footer-info .footer-text-group .footer-copyright {
  font-size: 0.75rem;
  color: #524d4a;
  margin-top: 0.25rem;
}
@media (max-width: 990px) {
  footer .footer-content .footer-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
footer .footer-content .footer-links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
footer .footer-content .footer-links a {
  color: #a8a29e;
  text-decoration: none;
  transition: color 0.3s ease;
}
footer .footer-content .footer-links a:hover {
  color: #fff;
}
@media (min-width: 990px) {
  footer .footer-content {
    flex-direction: row;
    /* 데스크탑: 왼쪽 정렬 */
    text-align: left;
  }
}

/*# sourceMappingURL=default.css.map */