/* ============================================================
   page-dictionary.css (Lego Block)
   뉘앙스 사전 페이지 전용: 수집형 카드 그리드 + 토큰 이코노미 잠금.
   ============================================================ */
.nuance-toolbar {
  position: sticky; top: 61px; z-index: 40;
  background: rgba(13, 17, 23, 0.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0; margin-bottom: 6px;
}
.nuance-search {
  width: 100%; font-family: var(--sans); font-size: 16px;
  padding: 13px 18px; border-radius: 12px; border: 1.5px solid var(--hairline);
  background: var(--paper-deep); color: var(--ink); margin-bottom: 14px;
}
.nuance-search:focus { outline: none; border-color: var(--red); }
.parent-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.parent-chips .nuance-chip { padding: 9px 18px; font-size: 14px; background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.parent-chips .nuance-chip.is-active { background: var(--gradient-primary); border-color: transparent; font-weight: 700; }
.nuance-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 4px; border-left: 2px solid var(--hairline); margin-bottom: 8px; }
.nuance-chips[hidden] { display: none !important; }
.nuance-chip {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 7px 15px; border-radius: 999px; border: 1.5px solid var(--hairline);
  background: var(--paper-deep); color: var(--ink-soft); cursor: pointer; user-select: none;
  transition: all .12s ease;
}
.nuance-chip:hover { border-color: var(--red); color: var(--red); }
.nuance-chip.is-active {
  background: var(--gradient-primary); border-color: transparent; color: #fff;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}
.nuance-count {
  font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 12px;
}
.nuance-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(5, 1fr);
  padding: 28px 0 80px;
}
@media (max-width: 1100px) { .nuance-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .nuance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .nuance-grid { grid-template-columns: 1fr; } }

/* Card Base (Cross-validated old design) */
.nuance-card {
  background: var(--paper-deep); border: 1.5px solid var(--hairline); border-radius: 16px;
  padding: 22px 20px; cursor: pointer; transition: border-color .12s ease, transform .12s ease;
  position: relative; overflow: hidden;
}
.nuance-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.nuance-card:hover { border-color: var(--red); transform: translateY(-3px); }
.nuance-card:hover::before { transform: scaleX(1); }

.nuance-card .set-tag {
  display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
  background: rgba(157,111,255,0.1); padding: 3px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.nuance-card .lock-tag {
  display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  background: var(--paper-deep); padding: 3px 10px; border-radius: 999px;
  margin-bottom: 12px; margin-left: 6px;
}
.nuance-card .term { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.nuance-card .roman {
  font-family: var(--sans); font-size: 13px; color: var(--red); font-weight: 600;
  margin-top: 4px;
}
/* 앞면: 카테고리/잠금/단어/발음만. 뜻·뉘앙스는 뒷면(.expand)에서만 보인다(2026-07-07) */
.nuance-card .card-face {
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  transform-origin: bottom center;
}
.nuance-card .expand { text-align: left; }
.nuance-card.is-flipping .card-face { transform: rotateX(-90deg); }
.nuance-card .flip-hint {
  display: block; margin-top: 12px; font-size: 13px; color: var(--muted);
  opacity: .55; transition: transform .2s ease;
}
.nuance-card.is-open .flip-hint { transform: rotate(180deg); }
.nuance-card .meaning { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.nuance-card .expand {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease .05s, opacity .25s ease .05s, margin-top .3s ease .05s;
}
.nuance-card.is-open .expand { 
  max-height: 480px; opacity: 1; margin-top: 14px; overflow-y: auto; 
  padding-right: 4px; /* for scrollbar */
}
.nuance-card .expand::-webkit-scrollbar { width: 4px; }
.nuance-card .expand::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.nuance-card .expand::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .nuance-card .card-face, .nuance-card .expand, .nuance-card .flip-hint { transition: none; }
}
.nuance-card .nuance-note {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
  padding-top: 12px; border-top: 1px solid var(--hairline);
}
.nuance-card audio { width: 100%; height: 34px; margin-top: 12px; }
.nuance-card .song-embed { margin-top: 12px; display: flex; justify-content: center; }
.nuance-card .song-embed iframe {
  width: 100%; max-width: 220px; aspect-ratio: 9 / 16; height: auto;
  border: 0; border-radius: 8px; display: block;
}
.nuance-card .source-link {
  display: inline-block; margin-top: 12px; font-family: var(--sans);
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.nuance-card .source-link:hover { color: var(--red); }
.nuance-empty {
  text-align: center; padding: 60px 20px; color: var(--muted); font-family: var(--sans);
}

/* ── 토큰 이코노미: 잠긴 카드 ── */
.token-balance {
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--paper-deep); border: 1.5px solid var(--hairline); border-radius: 999px;
  padding: 7px 14px; white-space: nowrap;
}
.token-balance b { color: var(--red); }
.nuance-card .lock-tag {
  display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #f0b429;
  background: rgba(240, 180, 41, 0.12); border: 1px solid rgba(240, 180, 41, 0.3);
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.nuance-card .lock-tag.is-owned {
  color: #34d399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.3);
}
.nuance-blur {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
  padding-top: 12px; border-top: 1px solid var(--hairline);
  filter: blur(5px); user-select: none; pointer-events: none;
}

/* ── Locked cards: look distinctly "worth unlocking", not just faded ──
   Signaled by the badge, lock icon, and a faint warm tint — deliberately
   NOT by overriding the border color, so a locked card still matches the
   color band of the row it sits in instead of breaking the stripe. */
.nuance-card.is-locked {
  background: var(--card-bg);
}
.nuance-card.is-locked:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 0 28px rgba(240, 180, 41, 0.16);
}
.nuance-card.is-locked .term { opacity: 0.7; }
.nuance-card.is-locked .roman { opacity: 0.6; }

/* ── 카드 저장(덱 담기) 별 버튼 ── */
.save-btn {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  border-radius: 50%; border: 1.5px solid var(--hairline); background: var(--paper-deep);
  color: var(--muted); font-size: 15px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .12s ease;
}
.save-btn:hover { border-color: var(--red); color: var(--red); }
.save-btn.is-saved { background: var(--red); border-color: var(--red); color: #fff; }

/* Bubble Character Scroll Button */
.scroll-top-btn {
  position: fixed; bottom: 33vh; right: 30px; z-index: 100;
  width: 56px; height: 56px;
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s ease;
  animation: characterFloat 3s infinite ease-in-out;
}
.scroll-top-btn[hidden] { opacity: 0; pointer-events: none; }

/* Arrow Hat */
.bubble-hat-arrow {
  position: absolute; top: -32px; font-size: 24px; color: #fff; font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  animation: floatArrow 1.5s infinite ease-in-out;
  z-index: 10;
}

/* Limbs */
.bubble-limbs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.arm, .leg { position: absolute; background: var(--text-color); border-radius: 10px; }
.arm { width: 18px; height: 3px; top: 50%; }
.arm.left { left: -14px; transform-origin: right center; animation: swingArmLeft 2s infinite ease-in-out; }
.arm.right { right: -14px; transform-origin: left center; animation: swingArmRight 2s infinite ease-in-out; }

.leg { width: 3px; height: 18px; bottom: -14px; }
.leg.left { left: 16px; transform-origin: top center; animation: swingLegLeft 2s infinite ease-in-out; }
.leg.right { right: 16px; transform-origin: top center; animation: swingLegRight 2s infinite ease-in-out; }

/* Body */
.bubble-body { 
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: 0 8px 20px rgba(255, 81, 47, 0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 2;
}

/* The jumping exercise animation on hover */
.scroll-top-btn:hover {
  animation: characterJump 0.4s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
}
.scroll-top-btn:hover .arm.left { animation: exerciseArmLeft 0.4s infinite alternate; }
.scroll-top-btn:hover .arm.right { animation: exerciseArmRight 0.4s infinite alternate; }
.scroll-top-btn:hover .leg.left { animation: exerciseLegLeft 0.4s infinite alternate; }
.scroll-top-btn:hover .leg.right { animation: exerciseLegRight 0.4s infinite alternate; }

/* Eyes */
.eyes { display: flex; gap: 8px; margin-top: -6px; margin-bottom: 2px; }
.eye { width: 5px; height: 5px; background: #fff; border-radius: 50%; animation: blink 4s infinite; }

/* Blush */
.blush { position: absolute; top: 28px; width: 34px; display: flex; justify-content: space-between; }
.blush::before, .blush::after { content: ''; width: 8px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 50%; }

/* Animations */
@keyframes characterFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(0.95, 1.05); }
}
@keyframes floatArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes characterJump {
  0%, 100% { transform: translateY(0) scale(1.1, 0.9); }
  50% { transform: translateY(-20px) scale(0.9, 1.1); }
}
@keyframes blink {
  0%, 96%, 98% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}

/* Walking Limbs */
@keyframes swingArmLeft { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes swingArmRight { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes swingLegLeft { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } }
@keyframes swingLegRight { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }

/* Exercise Limbs */
@keyframes exerciseArmLeft { 0% { transform: rotate(0deg); } 100% { transform: rotate(140deg); } }
@keyframes exerciseArmRight { 0% { transform: rotate(0deg); } 100% { transform: rotate(-140deg); } }
@keyframes exerciseLegLeft { 0% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } }
@keyframes exerciseLegRight { 0% { transform: rotate(0deg); } 100% { transform: rotate(-45deg); } }