/* ── 史問 카드 (학생 앱·마더십 공용) ── */
:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --g-N: #9aa3ad;
  --g-R: #4aa3ff;
  --g-SR: #c27cff;
  --g-SSR: #ffb703;
}

.hcard {
  --w: 168px;
  width: var(--w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--w) * 0.07);
  padding: calc(var(--w) * 0.045);
  background: linear-gradient(145deg, color-mix(in srgb, var(--set) 85%, #fff), var(--set) 55%, color-mix(in srgb, var(--set) 70%, #000));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .25);
  position: relative;
  font-family: var(--font);
  user-select: none;
  flex: none;
  container-type: inline-size;
}
.hcard-s { --w: 112px; }
.hcard-l { --w: min(300px, 74vw); }

.hc-inner {
  position: relative;
  height: 100%;
  border-radius: calc(var(--w) * 0.045);
  background: linear-gradient(180deg, #fffdf6, #f3ead6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 5.5cqw 5.5cqw 3.5cqw;
  gap: 2.6cqw;
  color: #2b2620;
}
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.hc-name { font-weight: 800; font-size: 8.4cqw; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-grade {
  flex: none; font-weight: 900; font-size: 6.4cqw; padding: 1cqw 3.2cqw; border-radius: 99px; color: #fff;
  background: var(--g-N); letter-spacing: 0.02em;
}
.g-R .hc-grade { background: var(--g-R); }
.g-SR .hc-grade { background: var(--g-SR); }
.g-SSR .hc-grade { background: linear-gradient(90deg, #ff8a00, #ffd000); color: #4a2a00; }

.hc-art {
  aspect-ratio: 4 / 3;
  border-radius: 3cqw;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--set) 25%, #fff), color-mix(in srgb, var(--set) 55%, #fff) 70%);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.2cqw rgba(255, 255, 255, .6), inset 0 0 0 1.8cqw color-mix(in srgb, var(--set) 40%, transparent);
}
.hc-icon { font-size: 30cqw; line-height: 1; filter: drop-shadow(0 2cqw 2cqw rgba(0, 0, 0, .18)); }
.hc-art.has-img .hc-icon { display: none; }
.hc-meta { display: flex; justify-content: space-between; font-size: 5.6cqw; font-weight: 700; color: color-mix(in srgb, var(--set) 70%, #000); }
.hc-set { background: color-mix(in srgb, var(--set) 18%, #fff); padding: 0.6cqw 3cqw; border-radius: 99px; }
.hc-desc { font-size: 5.6cqw; line-height: 1.45; color: #4a4339; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-break: keep-all; }
.hcard-l .hc-desc { -webkit-line-clamp: 8; font-size: 5.2cqw; }
.hc-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 4.6cqw; color: #9a8f7d; font-weight: 600; }
.hc-count {
  position: absolute; right: 3cqw; top: 39%; background: #1b1f3a; color: #fff; font-weight: 800;
  font-size: 7cqw; padding: 1cqw 3.5cqw; border-radius: 99px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.hc-new {
  position: absolute; left: 3cqw; top: 39%; background: #ef476f; color: #fff; font-weight: 900;
  font-size: 7cqw; padding: 1cqw 3.5cqw; border-radius: 99px; animation: pop 0.6s ease;
}

/* 등급별 테두리·광택 */
.hcard.g-R { box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 0 0 2px #cfe6ff; }
.hcard.g-SR { box-shadow: 0 6px 20px rgba(120, 40, 200, .35), 0 0 0 2px #e6c7ff; }
.hcard.g-SSR { box-shadow: 0 8px 26px rgba(255, 170, 0, .5), 0 0 0 2px #ffe08a; }
.hc-shine { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.g-SR .hc-shine {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%);
  background-size: 250% 100%; animation: shine 3.5s ease-in-out infinite; mix-blend-mode: soft-light;
}
.g-SSR .hc-shine {
  background:
    linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .7) 45%, transparent 60%),
    linear-gradient(135deg, rgba(255, 0, 128, .18), rgba(255, 200, 0, .18), rgba(0, 220, 255, .18), rgba(140, 0, 255, .18));
  background-size: 250% 100%, 300% 300%;
  animation: shine 2.6s ease-in-out infinite, holo 6s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes shine { 0% { background-position: 150% 0, 0 0; } 60%, 100% { background-position: -60% 0, 0 0; } }
@keyframes holo { 0% { background-position: 150% 0, 0% 50%; } 100% { background-position: 150% 0, 100% 50%; } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* 아직 없는 카드 */
.hcard.locked { background: linear-gradient(145deg, #4a4f66, #2a2e42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hcard.locked .hc-inner { background: repeating-linear-gradient(45deg, #343950 0 8px, #30354b 8px 16px); color: #8c92ab; }
.hc-lock { flex: 1; display: grid; place-items: center; font-size: 34cqw; font-weight: 900; color: rgba(255, 255, 255, .14); }
.hcard.locked .hc-foot { color: #8c92ab; }

/* 꽃가루 */
.fx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.fx-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0.8; } }