/* 화투 카드 CSS 디자인 (48장) — 이미지 없이 CSS만으로 구현 */
/* 2026-02-11 생성 */

/* 카드 래퍼: 3D 뒤집기 컨테이너 */
.card-wrapper {
  width: 60px;
  height: 90px;
  perspective: 600px;
  flex-shrink: 0;
}

.card-wrapper.size-lg {
  width: 72px;
  height: 108px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.card-wrapper.flipped .card-inner {
  transform: rotateY(180deg);
}

/* 앞뒤면 공통 */
.card-front,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* === 카드 뒷면 === */
.card-back {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(255, 255, 255, 0.03) 4px,
      rgba(255, 255, 255, 0.03) 5px
    ),
    linear-gradient(135deg, #1a0a0a 0%, #2d1515 50%, #1a0a0a 100%);
  border: 2px solid #8b2020;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-back::after {
  content: '花';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: rgba(139, 32, 32, 0.5);
  font-weight: 700;
}

/* === 카드 앞면 === */
.card-front {
  background: #fffef5;
  border: 2px solid #ccc;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px;
}

/* 월별 테마색 테두리 */
.card-front[data-month="1"]  { border-color: #2D5A27; }
.card-front[data-month="2"]  { border-color: #E8365D; }
.card-front[data-month="3"]  { border-color: #FF87AB; }
.card-front[data-month="4"]  { border-color: #7B2D8B; }
.card-front[data-month="5"]  { border-color: #4A7C59; }
.card-front[data-month="6"]  { border-color: #D4374A; }
.card-front[data-month="7"]  { border-color: #5C8A4D; }
.card-front[data-month="8"]  { border-color: #C4A35A; }
.card-front[data-month="9"]  { border-color: #DAA520; }
.card-front[data-month="10"] { border-color: #CC4422; }
.card-front[data-month="11"] { border-color: #8B6914; }
.card-front[data-month="12"] { border-color: #3A7D44; }

/* 좌상단 월 번호 */
.card-month {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

/* 중앙 이모지 */
.card-emoji {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.card-wrapper.size-lg .card-emoji {
  font-size: 1.9rem;
}

/* 하단 타입 라벨 */
.card-type-label {
  font-size: 0.5rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.2;
}

/* === 광 카드 === */
.card-front.type-gwang {
  background: linear-gradient(165deg, #fffef5 0%, #fff8dc 40%, #ffd700 100%);
}

.card-front.type-gwang .card-type-label {
  background: linear-gradient(135deg, #ffd700, #daa520);
  color: #5a3e00;
  font-size: 0.6rem;
  font-weight: 800;
}

.card-front.type-gwang::before {
  content: '光';
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 0.55rem;
  font-weight: 800;
  color: #b8860b;
  opacity: 0.6;
}

/* === 띠 카드 === */
.card-front.type-tti::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 6px;
  border-radius: 3px;
  transform: translateY(-50%);
  opacity: 0.3;
}

/* 홍단 */
.card-front.type-tti[data-tti="홍단"]::after {
  background: linear-gradient(90deg, #e74c3c, #ff6b6b);
}

/* 청단 */
.card-front.type-tti[data-tti="청단"]::after {
  background: linear-gradient(90deg, #2980b9, #5dade2);
}

/* 초단 */
.card-front.type-tti[data-tti="초단"]::after {
  background: linear-gradient(90deg, #27ae60, #52d98a);
}

/* 일반 띠 */
.card-front.type-tti[data-tti="띠"]::after {
  background: linear-gradient(90deg, #8e44ad, #bb6bd9);
}

.card-front.type-tti .card-type-label {
  color: #555;
  font-size: 0.48rem;
}

/* === 피 카드 === */
.card-front.type-pi .card-type-label {
  color: #999;
  font-size: 0.48rem;
}

/* === 하이라이트: 강괘 (4장 완성) === */
.card-wrapper.highlight {
  animation: cardGlow 1.5s ease-in-out infinite alternate;
}

@keyframes cardGlow {
  from {
    box-shadow: 0 0 8px rgba(212, 165, 32, 0.5);
    filter: brightness(1);
  }
  to {
    box-shadow: 0 0 24px rgba(212, 165, 32, 0.9), 0 0 40px rgba(212, 165, 32, 0.3);
    filter: brightness(1.1);
  }
}

/* 매칭 하이라이트 */
.card-wrapper.match-highlight {
  animation: matchPulse 0.6s ease-in-out;
}

@keyframes matchPulse {
  0% { transform: scale(1); box-shadow: none; }
  50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); }
  100% { transform: scale(1); box-shadow: none; }
}

/* 카드 사라지는 애니메이션 */
.card-wrapper.removing {
  animation: cardRemove 0.5s ease forwards;
}

@keyframes cardRemove {
  to {
    opacity: 0;
    transform: scale(0.5) translateY(-30px);
  }
}

/* 카드 등장 애니메이션 */
.card-wrapper.entering {
  animation: cardEnter 0.3s ease forwards;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}