/* achievements.css — 업적(그림 퍼즐) 탭과 달성 알림 (2026-10-03). js/achievements.js 와 한 묶음. */

/* ── 업적 탭 ── */
#music-home #achv-panel { gap: 18px; }
#achv-panel .achv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#achv-panel .achv-head h2 { margin: 2px 0 0; font-size: clamp(22px, 3.4vw, 30px); }
#achv-panel .achv-total { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
#achv-panel .achv-total b { font-size: 22px; color: #c98a00; }
#achv-panel .achv-total i { font-style: normal; font-size: 13px; opacity: .7; margin-right: 10px; }
/* 로비는 밝은 바탕이다 — 테두리·점은 보랏빛 잉크로 */
#achv-panel .achv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
#achv-panel .achv-chips button { font: 600 13px/1 inherit; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(90,70,150,.2); background: rgba(255,255,255,.6); color: inherit; cursor: pointer; }
#achv-panel .achv-chips button[aria-pressed="true"] { background: #f5c451; border-color: #f5c451; color: #2a2005; }
#achv-panel .achv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
#achv-panel .achv-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; border: 1px solid rgba(90,70,150,.16); background: rgba(255,255,255,.72); color: inherit; text-align: left; cursor: pointer; font: inherit; box-shadow: 0 2px 8px rgba(70,50,130,.06); }
#achv-panel .achv-card:hover { background: #fff; }
#achv-panel .achv-card.full { border-color: #e2a91f; box-shadow: 0 0 0 2px rgba(245,196,81,.35); }
#achv-panel .achv-card strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
#achv-panel .achv-prog { font-size: 12px; opacity: .72; font-variant-numeric: tabular-nums; }
#achv-panel .achv-dots { display: flex; gap: 3px; }
#achv-panel .achv-dots i { flex: 1; height: 5px; border-radius: 3px; background: rgba(90,70,150,.16); }
#achv-panel .achv-dots i.on { background: #e2a91f; }
#achv-panel .achv-empty { opacity: .7; }
.achv-frame { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #cdbb99; }
.achv-frame svg { display: block; width: 100%; height: 100%; }

/* ── 달성 알림 · 자세히 보기 ── */
#achv-popup { position: fixed; inset: 0; z-index: 10055; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgba(40,32,84,.9), rgba(10,8,26,.95)); opacity: 0; transition: opacity .24s ease; cursor: pointer; overflow-y: auto; }
#achv-popup.open { opacity: 1; }
.achv-popup-card { width: min(380px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; color: #f4f1ff; transform: translateY(12px); transition: transform .5s cubic-bezier(.2,.9,.25,1); }
.achv-popup-card.multi { width: min(720px, 100%); }
#achv-popup.open .achv-popup-card { transform: none; }
.achv-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #2a2005; background: #f5c451; padding: 4px 11px; border-radius: 999px; }
.achv-popup-title { font-size: clamp(19px, 5vw, 24px); margin-top: 10px; line-height: 1.25; }
.achv-popup-why { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: #ffe9a8; line-height: 1.35; }
.achv-popup-sub { margin: 4px 0 12px; font-size: 14px; color: #b9b3dd; }
.achv-popup-arts { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.achv-popup-arts figure { margin: 0; min-width: 0; }
.achv-popup-arts .achv-frame { box-shadow: 0 16px 44px rgba(0,0,0,.55); border: 2px solid rgba(245,196,81,.35); }
.achv-popup-arts figcaption { margin-top: 6px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.achv-popup-arts figcaption b { color: #f5c451; font-size: 12px; }
.achv-popup-arts figcaption span { color: #ffe9a8; font-size: 11px; line-height: 1.3; }
.achv-popup-more { margin: 8px 0 0; font-size: 13px; color: #b9b3dd; }
.achv-popup-rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.achv-reward { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 5px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; }
.achv-reward img { width: 26px; height: 26px; object-fit: contain; }
.achv-popup-foot { margin-top: 12px; color: #9d97c4; font-size: 12px; }
.achv-ladder { list-style: none; width: 100%; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.achv-ladder li { display: grid; grid-template-columns: 22px 1fr 24px auto; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 9px; background: rgba(255,255,255,.06); font-size: 13px; opacity: .62; }
.achv-ladder li.on { opacity: 1; background: rgba(245,196,81,.16); }
.achv-ladder li span { font-size: 12px; opacity: .7; }
.achv-ladder li b { font-variant-numeric: tabular-nums; }
.achv-ladder li img { width: 24px; height: 24px; object-fit: contain; }
.achv-ladder li em { font-style: normal; font-size: 12px; opacity: .85; }

/* 새 조각이 내려앉는다 (반짝임 없이) */
.achv-drop { animation: achv-drop .55s cubic-bezier(.2,.9,.3,1.15) both; transform-box: fill-box; transform-origin: center; }
@keyframes achv-drop { from { transform: scale(1.22) translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .achv-drop { animation: none; } .achv-popup-card { transition: none; } }
@media (max-width: 520px) {
  #achv-panel .achv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .achv-popup-card.multi .achv-popup-arts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .achv-popup-arts figcaption { font-size: 11px; }
}