@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=Noto+Sans+KR:wght@400;500;700&display=swap");

/* 기본 색상 팔레트 */
:root {
  --bg-night: #050712;
  --card-bg: #fffaf5;
  --card-inner: #fff5eb;

  --green-deep: #134632;
  --red-main: #d64545;
  --gold-main: #f5c766;
  --neon-pink: #ff66ff;
  --neon-blue: #45d6ff;

  --text-main: #2c2017;
  --text-sub: #7a6a59;
  --border-soft: #ebdfcf;
}

/* 리셋 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", system-ui, sans-serif;
  background: radial-gradient(
      circle at 0 0,
      rgba(255, 102, 255, 0.16) 0,
      transparent 55%
    ),
    radial-gradient(
      circle at 100% 0,
      rgba(69, 214, 255, 0.16) 0,
      transparent 55%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(245, 199, 102, 0.18) 0,
      transparent 55%
    ),
    var(--bg-night);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px 12px 32px;
}

/* 눈송이/빛 점 */
.page-bg {
  position: relative;
  width: 100%;
  max-width: 1024px;
}

.bg-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.7;
}
.d1 {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffffff 0, transparent 65%);
  top: 10px;
  left: 5%;
}
.d2 {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, #ffe4f8 0, transparent 65%);
  top: -20px;
  right: 2%;
}
.d3 {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, #ffe9bf 0, transparent 65%);
  bottom: 10px;
  right: 25%;
}

/* 메인 크리스마스 카드 */
.card {
  background: linear-gradient(145deg, var(--card-bg), #fffdf8);
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 26px rgba(69, 214, 255, 0.26);
  padding: 22px 22px 24px;
  position: relative;
}

/* 상단 카드 헤더 */
.card-header {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* JOYPICK 로고 */
.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.joypick-logo svg {
  max-width: 160px;
  width: 100%;
  filter: drop-shadow(0 0 10px rgba(245, 199, 102, 0.7))
    drop-shadow(0 0 20px rgba(245, 199, 102, 0.5));
}

.logo-tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(19, 70, 50, 0.08);
  color: #5c4a37;
  border: 1px solid #e7dccb;
}

/* 카드 타이틀 영역 */
.card-title-block {
  flex: 1;
}

.small-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 4px;
}

.card-title-block h1 {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 26px;
  color: var(--green-deep);
  margin-bottom: 6px;
}

.subtitle {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
}

/* 아이콘 3개 row */
.icon-row {
  margin: 12px 0 16px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--card-inner), #fff8f0);
  border: 1px solid #f0e3d3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.icon-card {
  text-align: center;
  padding: 6px 8px 10px;
  cursor: pointer;
  transition: 0.2s;
}
.icon-card:hover {
  transform: scale(1.04);
}

.icon-circle {
  width: 54px;
  height: 54px;
  margin: 0 auto 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: #fff;
  box-shadow: 0 0 10px rgba(69, 214, 255, 0.4),
    0 0 18px rgba(255, 102, 255, 0.4);
}

/* ============================= */
/* 아이콘 active 하이라이트 효과 */
/* ============================= */

.icon-card.active {
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7e6, #fffaf2);
  box-shadow: 0 0 0 2px rgba(245, 199, 102, 0.9),
    0 0 12px rgba(255, 255, 255, 0.9), 0 0 22px rgba(245, 199, 102, 0.85);
  transform: translateY(-3px);
}

.icon-card.active .icon-circle {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(245, 199, 102, 0.9), 0 0 30px rgba(245, 199, 102, 0.7);
}

/* 상품 섹션 */
.products-section {
  margin-top: 10px;
}

.products-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--green-deep);
}
.products-subtitle {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
}

/* 상품 그리드 */
.products-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ----- 상품 big 카드 ------ */
.product-card {
  border-radius: 18px;
  background: #fffdf8;
  border: 1px solid #ecdccc;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.product-image-wrap {
  width: 100%;
  height: 270px;
  overflow: hidden;
  background: #000;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-info-block {
  padding: 16px;
}

.product-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}

.product-desc {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.product-tags span {
  font-size: 11px;
  padding: 3px 8px;
  background: #fff3e1;
  border-radius: 14px;
  color: #996633;
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.price-before {
  text-decoration: line-through;
  font-size: 12px;
  color: #a78f7a;
}
.price-after {
  font-size: 15px;
  font-weight: 700;
  color: var(--red-main);
}

.btn-coupang {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: bold;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
}

/* 반응형 조정 */
@media (max-width: 600px) {
  .product-image-wrap {
    height: 200px;
  }
  .product-title {
    font-size: 15px;
  }
}

/* 데스크톱(가로 1024px 이상)에서 레이아웃 넓게 */
@media (min-width: 1024px) {
  .page-bg {
    max-width: 1280px;
  }

  .card {
    padding: 32px 32px 36px;
  }

  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3열 카드 */
    gap: 18px;
  }

  .product-title {
    font-size: 16px;
  }

  .product-desc {
    font-size: 14px;
  }
}

/* 모바일 전용 수정 */
@media (max-width: 480px) {
  /* 카테고리 전체 박스 */
  .icon-row {
    padding: 10px 6px;
    grid-template-columns: repeat(4, 1fr); /* 4개 균등 정렬 */
    gap: 8px;
  }

  /* 카드 */
  .icon-card {
    padding: 4px 0 8px;
  }

  /* 아이콘 원 */
  .icon-circle {
    width: 42px;
    height: 42px;
    font-size: 22px;
    margin-bottom: 4px;
  }

  /* 타이틀 */
  .icon-card h2 {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.2;
  }

  /* 설명 텍스트 */
  .icon-card p {
    font-size: 11px;
    line-height: 1.2;
  }
}

.joypick-logo-img {
  width: 160px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}