html {
  padding-right: 0 !important;
  font-family: Pretendard Variable, Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI,
    Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, sans-serif !important;
  scroll-behavior: smooth;
}

.nanum-myeongjo-regular {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 400;
  font-style: normal;
}

/* 문의하기 섹션 그라데이션 배경 */
.contact-gradient-bg {
  background: linear-gradient(to top, 
    rgba(107, 158, 58, 0.4) 0%, 
    rgba(107, 158, 58, 0.35) 20%, 
    rgba(125, 176, 77, 0.3) 35%, 
    rgba(155, 199, 111, 0.25) 50%, 
    rgba(184, 212, 143, 0.2) 65%, 
    rgba(212, 230, 177, 0.15) 75%, 
    rgba(238, 245, 232, 0.1) 85%, 
    rgba(246, 250, 243, 0.05) 92%, 
    rgba(254, 254, 254, 0.02) 97%, 
    rgba(255, 255, 255, 0) 100%);
}

/* 트랜지션 효과 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

/* 배경 그라데이션 */
.bg-forest-gradient {
  background: linear-gradient(135deg, #567B46 0%, #3d632d 100%);
}

.bg-warm-gradient {
  background: linear-gradient(135deg, #F5F1E5 0%, #E8E0D0 100%);
}

/* Marquee 애니메이션 호버 시 일시정지 */
.animate-partner-scroll:hover {
  animation-play-state: paused;
}

/* 마스너리 그리드 스타일 */
.grid-wrapper {
  columns: 4;
  column-gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.card-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 16px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  break-inside: avoid;
}

.card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 이미지 카드 다양한 높이 */
.image-card-1 { height: 240px; }
.image-card-2 { height: 350px; }
.image-card-3 { height: 160px; }
.image-card-4 { height: 400px; }
.image-card-5 { height: 240px; }

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 텍스트 카드 다양한 높이 */
.text-card-1 { height: 200px; }
.text-card-2 { height: 160px; }
.text-card-3 { height: 240px; }
.text-card-4 { height: 180px; }
.text-card-5 { height: 220px; }
.text-card-6 { height: 160px; }
.text-card-7 { height: 200px; }

.card-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  margin-bottom: 8px;
  text-align: center;
  /* font-family: "Nanum Myeongjo", serif; */
}

.card-description {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.card-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-bottom: 10px;
}

/* 심플한 배경 색상 */
.card-green .card-content {
  background: #567B46;
}

.card-red .card-content {
  background: #E67E22;
}

.card-yellow .card-content {
  background: #F39C12;
}

.card-blue .card-content {
  background: #3498DB;
}

.card-purple .card-content {
  background: #9B59B6;
}

/* 풀 컨테이너 스타일 */
.container-full {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

/* 반응형 숨김 클래스 */
@media (max-width: 768px) {
  .hide-on-tablet {
    display: none;
  }
  
  .grid-wrapper {
    columns: 2;
    column-gap: 20px;
  }
}

@media (max-width: 480px) {
  .hide-on-mobile {
    display: none;
  }
  
  .grid-wrapper {
    columns: 1;
    column-gap: 0;
  }
  
  .card-item {
    margin-bottom: 12px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .card-title {
    font-size: 1.125rem;
  }
  
  .card-description {
    font-size: 0.8rem;
  }
}

/* 식물 애니메이션 스타일 */
.no-fill, .cactus-prickle {
  fill: none;
}

.replay-text {
  fill: #ffffff;
  font-size: 24px;
  font-family: Helvetica, sans, monospace, sans-serif;
  user-select: none;
}

.back {
  fill: #b8c6d1;
}

/* 초기 상태: 모든 식물 요소들을 숨김 */
.pot {
  fill: #e3e5e1;
}
.pot-lighter {
  fill: #edeeeb;
}
.pot-lightest {
  fill: #f6f6f4;
}
.pot-top-lightest {
  fill: #fff;
}
.pot-top-soil {
  fill: #afb4a6;
}
.pot-shadow {
  fill: #a1b4bd;
}

.haworthia {
  clip-path: url(#haworthia-clip-path);
  fill: #7ea981;
}
.haworthia-strip {
  fill: #c7e5ce;
}
.haworthia-ouline {
  fill: #709c74;
  opacity: 0.5;
}

.cactus {
  clip-path: url(#cactus-clip-path);
  fill: #5b9a7c;
}
.cactus-lighter {
  fill: #63a689;
}
.cactus-lightest {
  fill: #6fb293;
}
.cactus-prickle {
  stroke: #4c8165;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 3px;
}
.flower-root {
  fill: #71d1a8;
}
.flower-lighter {
  fill: #efad96;
}
.flower {
  fill: #e19680;
}
.flower-back {
  fill: #d38570;
}

.echeveria {
  clip-path: url(#echeveria-clip-path);
  fill: #78b1b5;
}
.echeveria-darker {
  fill: #6ea8a8;
}
.echeveria-lighter {
  fill: #88bfbf;
}

/* 식물 애니메이션 호버 효과 */
.plant-animation svg {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.plant-animation svg:hover {
  transform: scale(1.02);
}

/* 초기 상태: 잎과 꽃들을 숨김 */
.leaf {
  opacity: 0;
}
.flower {
  opacity: 0;
}

.font-main {
  font-family: "Pretendard", sans-serif;
}

.bg-warm-ivory {
  background-color: #f8f6f0;
}

.text-warm-ivory {
  color: #f8f6f0;
}

/* 스크롤바 숨기기 */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* 반응형 border-radius */
/* .mobile-curve {
  border-radius: 60% 0% 60% 0% / 60% 0% 60% 0%;
}

@media (min-width: 1024px) {
  .lg\:pc-curve {
    border-radius: 70% 0% 70% 0% / 70% 0% 70% 0% !important;
  }
} */

/* 3D 큐브 로딩 애니메이션 */
#loading-container {
  width: 100%;
  perspective: 2200px;
  padding: 20px 60px;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

#loading-pos {
  width: 96px;
  margin: 0 auto;
}

.loading-cube {
  width: 10px;
  height: 48px;
  position: relative;
  margin-right: 2px;
  float: left;
  transform-style: preserve-3d;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
  animation: animCube 1s ease-in-out infinite;
}

.loading-cube div {
  position: absolute;
  display: block;
  width: 10px;
  height: 48px;
}

.loading-cube .center {
  width: 10px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.8);
  animation: animCenter 1s ease-in-out infinite;
  background-color: #f8f8f8;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(240, 240, 240, 0.9)
  );
}

.loading-cube .bottom {
  width: 10px;
  height: 3px;
  bottom: 0;
  transform: rotateX(90deg);
  transform-origin: center bottom;
  animation: animBottom 1s ease-in-out infinite;
  background-color: #e8e8e8;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.8),
    rgba(235, 235, 235, 0.6)
  );
}

.loading-cube .left {
  left: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
  animation: animSide 1s ease-in-out infinite;
  background-color: #f0f0f0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(230, 230, 230, 0.7)
  );
}

.loading-cube .right {
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: right center;
  animation: animSide 1s ease-in-out infinite;
  background-color: #f0f0f0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(230, 230, 230, 0.7)
  );
}

/* 각 큐브별 애니메이션 지연 */
.loading-cube:nth-child(1),
.loading-cube:nth-child(1) div {
  z-index: 1;
  animation-delay: 0.08333s;
}

.loading-cube:nth-child(2),
.loading-cube:nth-child(2) div {
  z-index: 2;
  animation-delay: 0.16667s;
}

.loading-cube:nth-child(3),
.loading-cube:nth-child(3) div {
  z-index: 3;
  animation-delay: 0.25s;
}

.loading-cube:nth-child(4),
.loading-cube:nth-child(4) div {
  z-index: 4;
  animation-delay: 0.33333s;
}

.loading-cube:nth-child(5),
.loading-cube:nth-child(5) div {
  z-index: 5;
  animation-delay: 0.41667s;
}

.loading-cube:nth-child(6),
.loading-cube:nth-child(6) div {
  z-index: 6;
  animation-delay: 0.5s;
}

.loading-cube:nth-child(7),
.loading-cube:nth-child(7) div {
  z-index: 7;
  animation-delay: 0.58333s;
}

.loading-cube:nth-child(8),
.loading-cube:nth-child(8) div {
  z-index: 8;
  animation-delay: 0.66667s;
}

/* 큐브 애니메이션 키프레임 */
@keyframes animCube {
  30% {
    transform: translateZ(48px) translateX(0) translateY(0) rotateX(3deg)
      rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1),
      0 4px 6px 1px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateZ(0px) rotateZ(0deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05), 0 0 0 0 transparent;
  }
}

@keyframes animSide {
  30% {
    width: 32px;
    background-color: #e0e0e0;
  }
  95% {
    width: 3px;
  }
}

@keyframes animBottom {
  30% {
    height: 32px;
  }
  95% {
    height: 3px;
  }
}

@keyframes animCenter {
  20% {
    background-color: #ffffff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1),
      inset 0 1px rgba(255, 255, 255, 1);
  }
  65% {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05),
      inset 0 1px rgba(255, 255, 255, 0.9);
  }
}