/* ========== User Card  ========== */
:root {
  /* 標題 */
  --user-card-title-color: #004481;
  --user-card-title-size: 6.4cqw;
  --user-card-title-weight: bold;

  /* 中間描述區 */
  --user-card-desc-color: #ffffff;
  --user-card-desc-size: 3.2cqw;
  --user-card-desc-line-height: 1.4;

  /* 氣泡標籤 */
  --user-card-tag-bg: #ffffff;
  --user-card-tag-color: #555;
  --user-card-tag-size: 2.2cqw;
  --user-card-tag-weight: 500;

  /* 底部資訊區（bottom 用 % 隨卡片高度等比例） */
  --user-card-footer-color: #222;
  --user-card-footer-size: 3.4cqw;
  --user-card-footer-weight: 500;
  --user-card-footer-bottom: 4%;
}

/* ========== User Card  ========== */
/* 卡片容器：基準設計稿寬度 503px / 高度 318px */
.user_card-wrapper {
  container-type: inline-size;
  container-name: user-card;
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 503 / 318;
  overflow: visible;
  user-select: none;
}

.user_base-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 文字層通用 */
.user_abs-layer {
  position: absolute;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.user-title {
  top: 2.5%;
  left: 2.2%;
  color: var(--user-card-title-color);
  font-family: var(--font-title);
  font-weight: var(--user-card-title-weight);
  font-size: var(--user-card-title-size);
}

.user_desc-group {
  top: 36%;
  left: 5.5%;
  flex-direction: column;
  align-items: flex-start;
}

.user_desc-text {
  color: var(--user-card-desc-color);
  font-size: var(--user-card-desc-size);
  line-height: var(--user-card-desc-line-height);
  margin-bottom: 2%;
}

.user_tag-row {
  font-family: var(--font-title);
  display: flex;
  gap: 1.2cqw;
  margin-top: 2%;
}

.user_tag {
  background: var(--user-card-tag-bg);
  color: var(--user-card-tag-color);
  border-radius: 100px;
  padding: 0.4cqw 1.6cqw;
  font-size: var(--user-card-tag-size);
  font-weight: var(--user-card-tag-weight);
}

.user-card_footer {
  bottom: var(--user-card-footer-bottom);
  left: 50%;
  transform: translateX(-50%);
  gap: 1.2cqw;
}
@container user-card (max-width: 1680px) {
  .user-card_footer {
    --user-card-footer-bottom: 3.5%;
  }
}
@container user-card (max-width: 780px) {
  .user-card_footer {
    --user-card-footer-bottom: 6.8%;
  }
}
@container user-card (max-width: 380px) {
  .user-card_footer {
    --user-card-footer-bottom: 5%;
  }
}

.user-card_footer-icon {
  width: clamp(30px, 3vw + 10px, 8cqw) !important;
  max-width: 32px;
  height: auto;
}

.user-card_footer-text {
  color: var(--user-card-footer-color);
  font-weight: var(--user-card-footer-weight);
  font-size: var(--user-card-footer-size);
}
@media (max-width: 320px) {
  .user_tag {
    padding: 0.6cqw 1.8cqw;
  }
}