@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
body {
    font-family: 'Poppins', sans-serif;
    background: #ececec;
}
.box-area {
    width: 930px;
}
.right-box {
    padding: 70px 30px 40px 40px;
}
::placeholder {
    font-size: 16px;
}
.rounded-4 {
    border-radius: 20px;
}
.rounded-5 {
    border-radius: 30px;
}
.input-group.mb-9 {
    padding-top: 30px;
}

/* 링크 기본 스타일 */
a {
    color: gray; /* 링크 색상을 회색으로 설정 */
}

/* 링크에 마우스를 올렸을 때의 스타일 */
a:hover {
    color: gray; /* 마우스 오버 시 색상 유지 */
}

/* 링크가 클릭된 후의 스타일 */
a:visited {
    color: gray; /* 방문한 링크 색상 유지 */
}

/* 링크가 활성화된 상태에서의 스타일 */
a:active {
    color: gray; /* 클릭했을 때 색상 유지 */
}

@media only screen and (max-width: 768px) {
    .box-area {
        margin: 0 10px;
    }
    .left-box {
        height: 100px;
        overflow: hidden;
    }
    .right-box {
        padding: 20px;
    }
}

.input-group {
    position: relative;
}
.input-group .form-control {
    border: 2px solid #007bff;
    transition: border-color 0.3s;
}
.input-group .form-control:focus {
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.input-group .form-control::placeholder {
    color: #999;
    opacity: 1;
}
.input-group .btn {
    transition: background-color 0.3s;
    margin-top: 30px;
}
.input-group .btn:hover {
    background-color: #0056b3;
}
.input-group.mb-3 {
    margin-bottom: 20px;
}

/* 원근은 부모가 제공 */
.image-container{
  width: 200px;          /* 필요시 160px로 줄여도 OK */
  height: 150px;
  position: relative;
  perspective: 900px;    /* 원근감 */
  pointer-events: auto;
}

/* 흰 카드 자체가 기울어짐 */
.tilt-card{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;                     /* 🔸 흰 배경(사라졌던 ‘흰 판’) */
  border-radius: 16px;
  overflow: hidden;                      /* 내부 레이어를 둥근 모서리로 클리핑 */
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
  transform: rotateX(0deg) rotateY(0deg) scale(1); /* 초기값 */
  z-index: 0;
}

/* 카드 안의 이미지 레이어 */
.tilt-card .art{
  position: absolute; inset: 12px;      /* 흰 여백 = 12px */
  background-image: url("https://blog.kakaocdn.net/dn/bkf1gQ/btrHxVQWNhk/4IyfcklwBNXzjSOFS2rHmK/img.png");
  background-size: contain;              /* 이미지 전부 보이게; 꽉 채우려면 cover */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  z-index: 1;
}

/* 반짝이는 하이라이트 */
.tilt-card .overlay{
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
      transparent 40%,
      rgba(255,255,255,.85) 45%,
      rgba(255,255,255,.6) 50%,
      transparent 54%);
  background-size: 150% 150%;
  background-position: 100%;
  mix-blend-mode: color-dodge;           /* 필요시 강하면 주석 처리로 테스트 */
  filter: brightness(1.1) opacity(.8);
  pointer-events: none;
  z-index: 2;
}

/* 접근성: 모션 감소 설정을 존중 */
@media (prefers-reduced-motion: reduce){
  .tilt-card{ transition: none !important; }
}