/* 퀘스트(하이랜드 P2 · LANES G9, 2026-10-24 사용자 "EFZ처럼 미니맵 밑에 퀘스트창 · UI 깔끔하게 · 메인 | 서브"). 판 · 머리 띠 · 탭 · 알약 = 공용 .popup.full(windows-css 01-popup).
   여기는 차이만(고품질UI: GUI 450 기준 · 아이콘 40 · 칸 44~52 · 제목 17 · 알약 28 · 탭 줄 30 · 단추 = 글자 폭, 고른 것은 크기 대신 베이지 · 흰 빛 테).
   색 = 거의 무채 + 강조: 메인 꼬리표 금 #e8c979(지갑 골드 · 도깨비의 세계 §5 "메인 노랑") · 서브 꼬리표 파랑 #5fb6e8(grades.json 잠재 rare · 도깨비 "서브 파랑")
        · 완료 가능 초록 #68d890(EFZ 퀘스트 완료 글자) · 알리미 판 #0d1011 α.5 · 테 #43494a(EFZ obj_quest_list 판 · 테) · 글자 #f2f0e7 / #b9bcb4(EFZ 흰 · 회) · 등급색 = grades.json. */

/* ---------------- ① 알리미(왼쪽 위 칸 아래 — 10-28 미니맵 대신 프로필 칸 .top-l 8 + 46 · 지금 자리 줄 4 + 20 = 78 → 6 띄워 알리미 top 84, 옛 미니맵 · 지역 이름 아래 140).
   G9-2A(10-25 사용자 "메인|서브로 나누지 마 · 메인은 위에 노란색 배지로 눈에 띄게 · 서브는 회색 배지에 회색으로 · < 1 > 넘김 · 최대 3개"): 탭 없음 ·
   머리 = "퀘스트 ≡" 알약 하나(창 열기) · 메인 두 줄(노란 배지 · 노란 이름 · 금빛 바탕) · 서브 한 줄(회색 배지 · 회색 글) · 넘치면 밑에 [‹ 1 ›].
   높이 = 머리 18 + 메인 32 + 서브 22 × 2 + 넘김 16 + 틈 = 116 → 아래 끝 208(top 92 — 11-04 지금 자리 알약 28, 조이스틱 고리 위 끝 245 위) */
#hud .qtrack { left: 8px; top: 92px; width: 196px; display: flex; flex-direction: column; gap: 2px; pointer-events: auto; }
#hud .qtrack[hidden] { display: none; }
#hud .qt-head { align-self: flex-start; display: flex; align-items: center; gap: 7px; height: 18px; padding: 0 7px 0 9px; border: 0; border-radius: 9px; background: rgba(13, 16, 17, .58);
  box-shadow: inset 0 0 0 1px rgba(67, 73, 74, .7); color: #f2f0e7; font: inherit; cursor: pointer; transition: transform .06s; }
#hud .qt-head:active { transform: scale(.94); }
#hud .qt-ttl { font-size: 10.5px; font-weight: 900; letter-spacing: .3px; text-shadow: 0 1px 2px #000; }
/* ≡ 흰 선 세 줄(메뉴 결 — 오른쪽 위 ☰ 와 같은 뜻) */
#hud .qt-menu { position: relative; width: 11px; height: 9px; background: linear-gradient(#f2f0e7 0 0) 0 0 / 100% 1.6px no-repeat, linear-gradient(#f2f0e7 0 0) 0 50% / 100% 1.6px no-repeat, linear-gradient(#f2f0e7 0 0) 0 100% / 100% 1.6px no-repeat; filter: drop-shadow(0 1px 1px #000); }
#hud .qt-rows { display: flex; flex-direction: column; gap: 2px; }
#hud .qt-item { position: relative; display: flex; align-items: center; }
#hud .qt-item > .qt-row { flex: 1; min-width: 0; width: 100%; }
#hud .qt-cancel { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); height: 22px; padding: 0 8px; border: 0; border-radius: 11px; white-space: nowrap;
  background: rgba(13, 16, 17, .82); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .48), 0 2px 6px rgba(0, 0, 0, .45); color: #f2f0e7; font: inherit; font-size: 10px; font-weight: 800;
  text-shadow: 0 1px 2px #000; cursor: pointer; pointer-events: auto; z-index: 2; transition: transform .06s, background .15s; }
#hud .qt-cancel:active { transform: translateY(-50%) scale(.94); }
#hud .qt-rows.flip-r > * { animation: qt-flip-r .22s cubic-bezier(.2, .9, .3, 1) both; }   /* 쪽 넘김 = 줄이 그쪽에서 밀려 들어옴 */
#hud .qt-rows.flip-l > * { animation: qt-flip-l .22s cubic-bezier(.2, .9, .3, 1) both; }
#hud .qt-rows > :nth-child(2) { animation-delay: 30ms; } #hud .qt-rows > :nth-child(3) { animation-delay: 60ms; }
/* 줄: 왼쪽 3px 색 꼬리표 · 어두운 반투명(오른쪽으로 옅어짐 — 도깨비 지역 이름 띠 결) · 1px 테 */
#hud .qt-row { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 22px; padding: 3px 16px 3px 8px; border: 0; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, rgba(13, 16, 17, .6), rgba(13, 16, 17, .34)); box-shadow: inset 0 0 0 1px rgba(67, 73, 74, .45); color: #f2f0e7; font: inherit; text-align: left; cursor: pointer;
  transition: transform .06s, background .15s; --qc: #8d918b; }
#hud .qt-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--qc); }
/* 메인 = 노랑으로 눈에 띄게(배지 #e8c979 = 지갑 골드 · 이름 #ffe39a · 금빛 바탕 · 금 테) */
#hud .qt-row.k-main { min-height: 32px; --qc: #e8c979; background: linear-gradient(90deg, rgba(74, 58, 18, .72), rgba(13, 16, 17, .4)); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .42); }
#hud .qt-row.k-main .qt-name { color: #ffe39a; }
#hud .qt-row.k-main .qt-goal { color: #e6dcc0; }
/* 서브 = 회색으로 덜 띄게(배지 #8d918b · 글 #a7aaa3 — EFZ 회 #b9bcb4 보다 한 단 낮게) */
#hud .qt-row.k-sub .qt-goal { color: #a7aaa3; font-size: 10px; }
#hud .qt-row.k-sub .qt-n { color: #c3c6bf; font-size: 10px; }
#hud .qt-row.s-none { cursor: default; --qc: #43494a; }
#hud .qt-row.s-none.hint { cursor: pointer; }
/* 받을 수 있는 서브 줄(메인 · 진행 줄 아래): ! 표지 = 수락 가능 금 #ffd36b(.s-offer 글자와 같은 값) · 표지 맥동 628 ms(ui-juice 빨간 점 주기) */
#hud .qt-row.hint.offer { --qc: #ffd36b; }
#hud .qt-row.hint.offer .qt-goal { color: #e6dcc0; font-size: 10px; }
#hud .qt-row.hint.offer .qt-n { color: #ffd36b; font-size: 10px; }
#hud .qt-bang { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #ffd36b; color: #16130d; font-style: normal; font-size: 9px; font-weight: 900; line-height: 12px; text-align: center; animation: qt-dot .628s ease-in-out infinite alternate; }
#hud .qt-row:active, #hud .qt-row.press { transform: scale(.97); }
#hud .qt-l1, #hud .qt-l2 { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
#hud .qt-tag { flex: none; font-style: normal; font-size: 8.5px; font-weight: 900; line-height: 12px; padding: 0 4px; border-radius: 3px; color: #16130d; background: var(--qc); }
#hud .qt-row.k-sub .qt-tag { color: #1c1e1c; background: #8d918b; }
#hud .qt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 900; text-shadow: 0 1px 2px #000; }
#hud .qt-goal { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 700; color: #b9bcb4; text-shadow: 0 1px 2px #000; }
#hud .qt-n { flex: none; font-style: normal; font-size: 10.5px; font-weight: 900; color: #f2f0e7; text-shadow: 0 1px 2px #000; }
#hud .qt-n.bump { animation: qt-bump .36s ease-out; }   /* 진행 숫자 톡(재화 숫자 튐 결) */
/* 이 줄로 걸어가는 중(10-25 사용자 "완료 가능 위에 (자동아이콘)이동중"): 메인 = 첫 줄 오른쪽(진행 글 바로 위) · 서브 = 진행 글 자리. 자동 아이콘(autohunt hud-auto.svg)이 돌고 걷는 점 셋(⑦ 이동 표시와 같은 점) */
#hud .qt-mv { flex: none; display: flex; align-items: center; gap: 3px; margin-left: auto; font-size: 10px; font-weight: 900; color: #ffe39a; text-shadow: 0 1px 2px #000; }
#hud .qt-mv .qt-auto { width: 10px; height: 10px; background: url(../autohunt/hud-auto.svg) center / contain no-repeat; filter: drop-shadow(0 1px 1px #000); animation: qt-spin 1.6s linear infinite; }
#hud .qt-mv .qm-dots { display: flex; gap: 2px; }
#hud .qt-mv .qm-dots > i { width: 2px; height: 2px; border-radius: 50%; background: #ffe39a; animation: qm-dot .9s ease-in-out infinite; }
#hud .qt-mv .qm-dots > i:nth-child(2) { animation-delay: .15s; } #hud .qt-mv .qm-dots > i:nth-child(3) { animation-delay: .3s; }
#hud .qt-go { position: absolute; right: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid rgba(242, 240, 231, .5); border-top: 1.5px solid rgba(242, 240, 231, .5); transform: rotate(45deg); }
/* 상태: 완료 가능 = 초록 꼬리표 · 글자 + 테 빛 맥동(등급 빛 1047 ms) · 받을 수 있음 = 금 글자 · 레벨 모자람 = 흐림 · 보내는 중 = 도는 고리 */
#hud .qt-row.s-ready { --qc: #68d890; animation: qt-ready 1.047s ease-in-out infinite alternate; }
#hud .qt-row.s-ready .qt-n { color: #68d890; }
#hud .qt-row.s-ready .qt-go { border-color: #68d890; }
#hud .qt-row.k-main .qt-tag { background: #e8c979; }   /* 배지 = 늘 메인 노랑 · 서브 회색(완료 가능은 꼬리표 · 글 · 테만 초록 — sandbox 에서 메인 배지가 초록으로 바뀌어 보임) */
#hud .qt-row.s-offer .qt-n { color: #ffd36b; }
#hud .qt-row.s-level, #hud .qt-row.s-wait { opacity: .62; }
#hud .qt-row.s-level .qt-n { color: #9a9d98; }
#hud .qt-row.s-busy .qt-go { width: 8px; height: 8px; margin-top: -5px; border: 2px solid rgba(242, 240, 231, .25); border-top-color: #f2f0e7; border-radius: 50%; animation: qt-spin .7s linear infinite; }
/* 새 줄 = 왼쪽에서 들어오며 빛 한 번 훑기 */
#hud .qt-row.fresh { animation: qt-in .28s cubic-bezier(.2, .9, .3, 1) both; }
#hud .qt-row.fresh::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .28), transparent); animation: qt-sheen .9s ease-out .15s both; pointer-events: none; }
#hud .qt-row.s-ready.fresh { animation: qt-in .28s cubic-bezier(.2, .9, .3, 1) both, qt-ready 1.047s ease-in-out .28s infinite alternate; }
/* 넘김 [‹ 1 ›]: 어두운 알약 단추 22 × 16 · 쪽 번호 · 끝 쪽은 흐림 · 다른 쪽에 완료 가능 = 초록 점 */
#hud .qt-pager { display: flex; align-items: center; justify-content: center; gap: 8px; height: 16px; }
#hud .qt-pager[hidden] { display: none; }
#hud .qt-pg { position: relative; width: 22px; height: 16px; padding: 0; border: 0; border-radius: 8px; background: rgba(13, 16, 17, .58); box-shadow: inset 0 0 0 1px rgba(67, 73, 74, .7); cursor: pointer; transition: transform .06s, opacity .15s; }
#hud .qt-pg:active { transform: scale(.9); }
#hud .qt-pg:disabled { opacity: .32; cursor: default; }
#hud .qt-pg > i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -3px 0 0 -2px; border-left: 1.5px solid #f2f0e7; border-bottom: 1.5px solid #f2f0e7; transform: rotate(45deg); }
#hud .qt-pg.next > i { margin-left: -4px; transform: rotate(-135deg); }
#hud .qt-pg.dot::after { content: ""; position: absolute; right: -1px; top: -1px; width: 5px; height: 5px; border-radius: 50%; background: #68d890; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); animation: qt-dot .628s ease-in-out infinite alternate; }   /* 점 628 ms(ui-juice) */
#hud .qt-pn { min-width: 10px; font-size: 10px; font-weight: 900; text-align: center; color: #f2f0e7; text-shadow: 0 1px 2px #000; }
#ui .qwin .qw-tabs .tab.qw-dot { position: relative; }
#ui .qwin .qw-tabs .tab.qw-dot::after { content: ""; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #68d890; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); animation: qt-dot .628s ease-in-out infinite alternate; }   /* [성장] 탭 받을 보상 = 알리미 쪽 넘김과 같은 초록 점(11-03 W1) */
@keyframes qt-dot { from { transform: scale(.85); } to { transform: scale(1.15); } }
@keyframes qt-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #fff6d8; } 100% { transform: scale(1); } }
@keyframes qt-ready { from { box-shadow: inset 0 0 0 1px rgba(104, 216, 144, .45); } to { box-shadow: inset 0 0 0 1px rgba(104, 216, 144, .95), 0 0 8px rgba(104, 216, 144, .35); } }
@keyframes qt-spin { to { transform: rotate(360deg); } }
@keyframes qt-in { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qt-sheen { from { left: -40%; } to { left: 120%; } }
@keyframes qt-flip-r { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qt-flip-l { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- ③ 대화 판 단추([수락] [다음에] · [완료]) — slots.js 선택지(.gf-talk-opt 248×38 · 둥근 19 · 아이콘 원 28)와 같은 자리 · 크기 · 색 */
#ui .qt-talk-opts { position: absolute; right: 7.5%; top: 48px; height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; pointer-events: auto; z-index: 4; }
#ui .qt-talk-opt { position: relative; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; width: 220px; height: 38px; padding: 0 14px 0 5px; border: 0; border-radius: 19px;
  background: linear-gradient(90deg, rgba(14, 17, 24, .9), rgba(14, 17, 24, .68)); box-shadow: inset 0 0 0 1px rgba(222, 226, 237, .12), 0 4px 12px rgba(0, 0, 0, .35);
  color: #eef0f4; font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; text-shadow: 0 1px 2px #000; cursor: pointer;
  animation: qt-opt-in .3s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform .08s; }
#ui .qt-talk-opt > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
#ui .qt-talk-opt > i::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url(icon-quest.png) center / contain no-repeat; mask: url(icon-quest.png) center / contain no-repeat; }
#ui .qt-talk-opt.k-go { color: #2b261e; text-shadow: none; background: linear-gradient(90deg, #f0e8d6, #d9cbab); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 14px rgba(240, 232, 214, .35), 0 4px 12px rgba(0, 0, 0, .35); }   /* 결정 = 고른 알약 베이지(slots .gf-talk-opt.on) */
#ui .qt-talk-opt.k-go > i { background: rgba(43, 38, 30, .12); }
#ui .qt-talk-opt.k-end { color: #9aa0a6; }
#ui .qt-talk-opt.k-end > i::after { -webkit-mask-image: url(../../assets/icons/talk-end.svg); mask-image: url(../../assets/icons/talk-end.svg); }
#ui .qt-talk-opt:active { transform: scale(.97); }
#ui .qt-talk-opt.picked { animation: qt-opt-pick .18s ease-out both; }
@keyframes qt-opt-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qt-opt-pick { 45% { transform: scale(1.05); filter: brightness(1.15); } 100% { transform: scale(1); } }

/* ---------------- ④ 퀘스트 창(전체화면): 머리 = ‹ + 흰 퀘스트 아이콘 + 제목 + 메인 진행 · 탭 줄 · 왼쪽 목록 300 | 오른쪽 상세(도깨비 §8 B — UI 를 한쪽 열로 모음) */
#ui .popup.full.qwin > .popup-head > h2::before { -webkit-mask-image: url(icon-quest.png); mask-image: url(icon-quest.png); }
#ui .qwin .qw-chap { margin-left: 10px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
#ui .qwin .qw-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#ui .qwin .qw-bar .tabs { height: 30px; }
#ui .qwin .qw-reset { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
#ui .qwin .qw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 10px; }
#ui .qwin .qw-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
/* 목록 줄(G9-2A, 10-25 "메인 노란 배지 · 서브 회색 배지 · 지금 맡고 있는 퀘스트만 · 보여질 걸 선택할 수 있게"): [배지] 이름 · 진행 · 알리미 켬/끔 칸(16) */
#ui .qwin .qw-lhead { flex: none; display: flex; align-items: center; justify-content: space-between; height: 18px; padding: 0 8px 0 4px; font-size: 10.5px; font-weight: 800; color: var(--ink-soft); }
#ui .qwin .qw-lhead.sec { margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--ink); color: var(--ink); }   /* 섹션 머리 = 흰 세로 막대 + 흰 굵은 글(도깨비 §8) */
#ui .qwin .qw-row { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 8px; border: 0; border-radius: 7px; text-align: left;
  color: var(--ink); font: inherit; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); cursor: pointer; transition: transform .06s, background .15s; }
#ui .qwin .qw-row.pinnable { grid-template-columns: auto 1fr auto 16px; }
#ui .qwin .qw-row:active { transform: scale(.98); }
#ui .qwin .qw-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 800; }
#ui .qwin .qw-row.k-main b { color: #ffe39a; }   /* 메인 = 노랑(알리미와 같은 #ffe39a) */
#ui .qwin .qw-row.k-main { background: linear-gradient(90deg, rgba(232, 201, 121, .14), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .28); }
#ui .qwin .qw-row.k-sub b { color: #c9ccc5; }
#ui .qwin .qw-tag { font-style: normal; font-size: 9.5px; font-weight: 900; line-height: 15px; padding: 0 5px; border-radius: 3px; color: #16130d; background: #e8c979; }
#ui .qwin .k-sub .qw-tag { color: #1c1e1c; background: #8d918b; }
#ui .qwin .qw-pr { font-style: normal; font-size: 11px; font-weight: 900; color: var(--ink-soft); white-space: nowrap; }
#ui .qwin .k-main .qw-pr { color: #e8c979; }
#ui .qwin .s-ready .qw-pr { color: #68d890; }
#ui .qwin .s-offer .qw-pr { color: #ffd36b; }
#ui .qwin .s-done .qw-pr { color: #68d890; font-size: 10.5px; }
#ui .qwin .qw-row.on { background: linear-gradient(90deg, rgba(230, 222, 205, .26), rgba(199, 187, 163, .12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 10px rgba(240, 232, 214, .12); }   /* 고른 줄 = 베이지 · 흰 빛 테(도깨비 §8 도술 목록) */
#ui .qwin .qw-row.s-ready { animation: qw-ready 1.047s ease-in-out infinite alternate; }   /* 완료 가능 = 초록 테 맥동(등급 빛 1047 ms) */
#ui .qwin .qw-row.s-done b { color: #9a9d98; }
#ui .qwin .qw-row.s-level, #ui .qwin .qw-row.s-wait { opacity: .55; }
/* 알리미 켬/끔 칸: 둥근 네모 테 · 켬 = 금 채움 + 검은 체크(눌러 바꾸면 톡 튐) */
#ui .qwin .qw-pin { position: relative; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(242, 240, 231, .42); transition: background .15s, box-shadow .15s; }
#ui .qwin .qw-pin.on { background: #e8c979; box-shadow: inset 0 0 0 1px rgba(255, 246, 216, .7), 0 0 6px rgba(232, 201, 121, .35); }
#ui .qwin .qw-pin.on > i { position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border-right: 2px solid #16130d; border-bottom: 2px solid #16130d; transform: rotate(45deg); }
#ui .qwin .qw-pin.flick { animation: qw-flick .26s ease-out; }
@keyframes qw-flick { 45% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes qw-ready { from { box-shadow: inset 0 0 0 1px rgba(104, 216, 144, .35); } to { box-shadow: inset 0 0 0 1px rgba(104, 216, 144, .9), 0 0 8px rgba(104, 216, 144, .3); } }

#ui .qwin .qw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1; min-height: 160px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
#ui .qwin .qw-empty i { width: 40px; height: 40px; background: #6d716c; -webkit-mask: url(icon-quest.png) center / contain no-repeat; mask: url(icon-quest.png) center / contain no-repeat; }   /* 빈 목록 = 무채색 글리프 */
/* 완료됨 거르기 [전체 · 메인 · 서브](글자 폭 알약 22) + 아래 넘김 [‹ 1/3 ›](10-25 "필터 · 스크롤 대신 < 1 > 버튼") — 알리미 넘김(.qt-pg)과 같은 어두운 알약 */
#ui .qwin .qw-filter { flex: none; display: flex; gap: 4px; margin-bottom: 4px; }
#ui .qwin .qw-f { flex: none; height: 22px; padding: 0 9px; border: 0; border-radius: 11px; font-size: 10.5px; font-weight: 800; color: var(--ink-soft); background: rgba(13, 16, 17, .58); box-shadow: inset 0 0 0 1px rgba(67, 73, 74, .7); }
#ui .qwin .qw-f em { margin-left: 4px; font-style: normal; font-weight: 700; opacity: .75; }
#ui .qwin .qw-f.on { color: #16130d; background: #e6decd; box-shadow: none; }   /* 고른 것 = 베이지(목록 고른 줄과 같은 색) */
#ui .qwin .qw-f:active, #ui .qwin .qw-pg:active { transform: scale(.92); }
#ui .qwin .qw-pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding-top: 6px; }
#ui .qwin .qw-pager b { min-width: 30px; font-size: 12px; font-weight: 900; text-align: center; color: var(--ink); }
#ui .qwin .qw-pager small { font-size: 10px; font-weight: 700; color: var(--ink-soft); }
#ui .qwin .qw-pg { position: relative; width: 30px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: rgba(13, 16, 17, .58); box-shadow: inset 0 0 0 1px rgba(67, 73, 74, .7); cursor: pointer; }
#ui .qwin .qw-pg:disabled { opacity: .32; cursor: default; }
#ui .qwin .qw-pg > i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -2px; border-left: 1.5px solid #f2f0e7; border-bottom: 1.5px solid #f2f0e7; transform: rotate(45deg); }
#ui .qwin .qw-pg.next > i { margin-left: -4px; transform: rotate(-135deg); }
/* 상세 카드 */
#ui .qwin .qw-detail { min-height: 0; overflow: auto; border-radius: 10px; background: rgba(0, 0, 0, .22); }
#ui .qwin .qw-card { display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding: 12px 14px; animation: fx-card-in .22s ease-out both; }
#ui .qwin .qw-card.still, #ui .qwin .qw-card.still .qr-cell { animation: none; }   /* 같은 퀘스트 숫자만 바뀜 = 등장 연출 다시 안 함(quest.js qwDetail) */
#ui .qwin .qw-top { display: flex; align-items: center; gap: 10px; }
#ui .qwin .qw-face { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); display: grid; place-items: center; }
#ui .qwin .qw-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
#ui .qwin .qw-face.crop { position: relative; display: block; }   /* 얼굴만 확대(10-25) — 자리 · 배율은 quest.js FACE 가 인라인으로 */
#ui .qwin .qw-face.crop img { position: absolute; height: auto; max-width: none; object-fit: fill; }
#ui .qwin .qw-face.none b { font-size: 18px; font-weight: 900; color: var(--ink-soft); }
#ui .qwin .qw-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ui .qwin .qw-name small { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
#ui .qwin .qw-name h3 { margin: 0; font-size: 17px; font-weight: 900; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .qwin .qw-kind { align-self: flex-start; font-size: 9.5px; font-weight: 900; line-height: 15px; padding: 0 6px; border-radius: 3px; color: #16130d; background: #e8c979; }
#ui .qwin .qw-kind.k-sub { background: #8d918b; color: #1c1e1c; }   /* 서브 = 회색 배지(10-25) */
#ui .qwin .qw-goal { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
#ui .qwin .qw-gl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#ui .qwin .qw-gl b { font-size: 13px; font-weight: 800; color: var(--ink); }
#ui .qwin .qw-gl em { font-style: normal; font-size: 12.5px; font-weight: 900; color: #e8c979; }
#ui .qwin .s-ready .qw-gl em, #ui .qwin .s-done .qw-gl em { color: #68d890; }
#ui .qwin .qw-bar2 { height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .45); overflow: hidden; }
#ui .qwin .qw-bar2 i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #c9a24e, #ffd36b); transition: width .4s ease-out; }
#ui .qwin .s-ready .qw-bar2 i, #ui .qwin .s-done .qw-bar2 i { background: linear-gradient(90deg, #3fae6a, #68d890); }
#ui .qwin .qw-story { display: flex; flex-direction: column; gap: 4px; }
#ui .qwin .qw-story p { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.5; color: #b9bcb4; }
#ui .qwin .qw-story p::before { content: "“"; margin-right: 2px; color: #7d817c; }
#ui .qwin .qw-rw { display: flex; flex-direction: column; gap: 6px; }
#ui .qwin .qw-rwt { font-size: 11.5px; font-weight: 900; color: var(--ink); padding-left: 8px; border-left: 2px solid var(--ink); }
#ui .qwin .qw-cells { display: flex; flex-wrap: wrap; gap: 6px; }
#ui .qwin .qw-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#ui .qwin .qw-why { margin-right: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
#ui .qwin .qw-btns { display: flex; gap: 6px; }
#ui .qwin .qw-btns .btn { flex: none; }

/* 보상 칸(44 — 보상 획득 창 56 · 여럿 40 사이, 10-24 "큼지막하게 하지 마"): 등급색 1px 테 · 아래 수 · 경험치 = 그림(assets/hud/exp.png — 골드 · 다이아와 같은 결, G9-2A) · 상자 = 그 장비 그림 + 상자 꼬리표 */
.qr-cell { position: relative; flex: none; width: 44px; height: 44px; border-radius: 6px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px var(--g, #9aa0a6), inset 0 -10px 14px -10px var(--g, #9aa0a6); display: grid; place-items: center; animation: qr-pop .42s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * 70ms); }   /* 보상 칸 70 ms 순차 · 420 ms 팝(ui-juice) */
.qr-cell.g-common { --g: #9aa0a6; } .qr-cell.g-uncommon { --g: #5db75d; } .qr-cell.g-rare { --g: #3d8eb9; } .qr-cell.g-epic { --g: #e2583a; } .qr-cell.g-unique { --g: #9a5cd0; } .qr-cell.g-legendary { --g: #f2c230; }   /* data/grades.json item 색 */
.qr-cell .qr-pic { position: relative; width: 30px; height: 30px; display: grid; place-items: center; margin-top: -6px; }
.qr-cell .qr-pic img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.qr-cell .qr-title { width: 22px; height: 22px; background: #f2c230; -webkit-mask: url(icon-quest.png) center / contain no-repeat; mask: url(icon-quest.png) center / contain no-repeat; }
.qr-cell .qr-box { position: absolute; right: -6px; top: -6px; width: 13px; height: 13px; border-radius: 3px; background: rgba(14, 16, 18, .9); box-shadow: inset 0 0 0 1px var(--g, #9aa0a6); }
.qr-cell .qr-box::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 900; color: var(--g, #9aa0a6); }
.qr-cell .qr-box.solo { position: static; width: 24px; height: 24px; }
.qr-cell .qr-box.solo::after { font-size: 14px; }
.qr-cell > em { position: absolute; left: 2px; right: 2px; bottom: 1px; font-style: normal; font-size: 9.5px; font-weight: 900; line-height: 12px; text-align: center; color: #f2f0e7; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-cell.big { width: 52px; height: 52px; }
.qr-cell.big .qr-pic, .qr-cell.big .qr-pic img { width: 34px; height: 34px; }
@keyframes qr-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* 퀘스트 보상 표시(r.q — 퀘스트를 끝낼 때 받음): 칸 왼쪽 위 작은 원 + 퀘스트 아이콘(알리미 메인 금 #e2c98a) */
.qr-cell .qr-q { position: absolute; left: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: rgba(14, 16, 18, .94); box-shadow: inset 0 0 0 1px #e2c98a, 0 1px 2px rgba(0, 0, 0, .6); }
.qr-cell .qr-q::after { content: ""; position: absolute; inset: 2px; background: #e2c98a; -webkit-mask: url(icon-quest.png) center / contain no-repeat; mask: url(icon-quest.png) center / contain no-repeat; }
/* 보상 판(quest.js rewardGrid): 줄 바꿈 격자 · 줄마다 가운데(버섯커 보상 창) · 칸 수에 따라 48 / 40 / 32 · 열 수 = --cols(줄마다 고르게)
   폭은 작은 폰(GUI 800) 오른쪽 스킬 묶음(오른쪽 끝에서 260) 안쪽 = 7열 × 37 */
.qr-grid { --cell: 48px; --gap: 8px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: var(--gap); padding: 4px;
  width: calc(var(--cols, 6) * (var(--cell) + var(--gap)) - var(--gap) + 8px); box-sizing: border-box; }
.qr-grid .qr-cell { width: var(--cell); height: var(--cell); animation-delay: calc(var(--d0, 0s) + var(--i, 0) * var(--st, 70ms)); }
.qr-grid.s1 .qr-pic, .qr-grid.s1 .qr-pic img { width: 32px; height: 32px; }
.qr-grid.s2 { --cell: 40px; --gap: 6px; } .qr-grid.s2 .qr-pic, .qr-grid.s2 .qr-pic img { width: 26px; height: 26px; }
.qr-grid.s3 { --cell: 32px; --gap: 5px; } .qr-grid.s3 .qr-pic, .qr-grid.s3 .qr-pic img { width: 21px; height: 21px; }
.qr-grid:is(.s2, .s3) .qr-cell > em { font-size: 8.5px; line-height: 10px; }
.qr-grid.over { max-height: 188px; overflow-y: auto; pointer-events: auto; scrollbar-width: none; }   /* 35칸 넘음 = 다섯 줄까지 보이고 끌어서 넘김 */
/* 좋은 등급(영웅 이상) = 칸이 펴진 뒤 빛이 한 번 지나가고 테 빛이 숨쉼(등급 빛 1047 ms — ui-juice) */
.qr-grid .qr-cell:is(.g-epic, .g-unique, .g-legendary)::before { content: ""; position: absolute; inset: -2px; border-radius: 8px; box-shadow: 0 0 9px 1px var(--g); pointer-events: none;
  animation: qr-glow 1.047s ease-in-out calc(var(--d0, 0s) + .42s + var(--i, 0) * var(--st, 70ms)) infinite alternate both; }
.qr-grid .qr-cell:is(.g-epic, .g-unique, .g-legendary)::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  animation: qr-sheen .55s ease-out calc(var(--d0, 0s) + .3s + var(--i, 0) * var(--st, 70ms)) both; }
@keyframes qr-glow { from { opacity: .25; } to { opacity: 1; } }
@keyframes qr-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------------- ⑤ 완료 연출(창 층 가운데 위): 짙은 반투명 띠(양 끝 흐림) + 위아래 1px 빛선 + 진주빛 명조 글자 모임 → 보상 칸 순차 팝 → 떠오르며 흐림(도깨비 제목 말씨 · 문파전 v5 결) */
@font-face { font-family: "QuestTitle"; src: url("QuestTitle.woff2") format("woff2"); font-display: block; }
.qclear { position: absolute; left: 0; right: 0; top: 92px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: var(--z-banner, 60); }
.qclear .qc-band { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 120px 9px; background: linear-gradient(90deg, transparent, rgba(10, 12, 14, .74) 22%, rgba(10, 12, 14, .74) 78%, transparent);
  animation: qc-open .32s cubic-bezier(.2, .9, .3, 1) both; }
.qclear .qc-band::before, .qclear .qc-band::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #c8aa6e, transparent); }
.qclear .qc-band::before { top: 0; } .qclear .qc-band::after { bottom: 0; }
.qclear .qc-big { font-family: "QuestTitle", "GwTitle", GFUIFont, serif; font-size: 26px; font-weight: 900; letter-spacing: 6px; color: #fbf6ea; text-shadow: 0 0 12px rgba(255, 236, 190, .55), 0 2px 4px rgba(0, 0, 0, .8);
  animation: qc-gather .5s ease-out .08s both; }
.qclear.boss .qc-big { color: #ffe3a6; }
.qclear .qc-sub { font-size: 12px; font-weight: 800; color: #c8c3b5; letter-spacing: 1px; animation: qc-fade .4s ease-out .3s both; }
.qclear .qc-cells { display: flex; justify-content: center; }
.qclear .qc-cells .qr-grid { --d0: .45s; }
.qclear.out { animation: qc-out .6s ease-in both; }
.qclear.out.quick { animation-duration: .2s; }   /* 새 팝업이 열려 비킴(quest.js celebrateFrame) */
@keyframes qc-open { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qc-gather { from { letter-spacing: 26px; opacity: 0; filter: blur(3px); } to { letter-spacing: 6px; opacity: 1; filter: none; } }
@keyframes qc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes qc-out { to { opacity: 0; transform: translateY(-18px); } }
/* 뒤 판(G9-2A, 10-25 "뒤에 위아래가 바깥으로 갈수록 알파값이 옅어지는 어두운 판넬"): 화면 폭 전체 · 띠와 보상 칸을 덮는 세로 그라데이션(가운데 .74 → 위 · 아래 끝 0)
   + 띠 뒤 느린 빛살 · 금빛 티끌 10. 판 · 빛살은 쌓임 맨 뒤(z -1) */
.qclear .qc-dim { position: absolute; left: -40px; right: -40px; top: -86px; bottom: -70px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 8, 10, 0), rgba(6, 8, 10, .6) 28%, rgba(6, 8, 10, .74) 50%, rgba(6, 8, 10, .6) 72%, rgba(6, 8, 10, 0)); animation: qc-dim-in .3s ease-out both; }
.qclear.boss .qc-dim { background: linear-gradient(to bottom, rgba(14, 9, 5, 0), rgba(14, 9, 5, .66) 28%, rgba(14, 9, 5, .8) 50%, rgba(14, 9, 5, .66) 72%, rgba(14, 9, 5, 0)); }
.qclear .qc-rays { position: absolute; left: 50%; top: 26px; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 168, .11) 0deg 5deg, transparent 5deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: qc-rays 9s linear infinite, qc-dim-in .5s ease-out .1s both; }
.qclear .qc-motes { position: absolute; left: 50%; top: 26px; width: 0; height: 0; z-index: 1; pointer-events: none; }
.qclear .qc-motes > i { position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 5px rgba(255, 220, 140, .9); opacity: 0;
  animation: qc-mote 1.5s cubic-bezier(.2, .7, .3, 1) both; }
.qclear .qc-motes > i:nth-child(1) { --mx: -150px; --my: -22px; animation-delay: .1s; } .qclear .qc-motes > i:nth-child(2) { --mx: 140px; --my: -30px; animation-delay: .14s; }
.qclear .qc-motes > i:nth-child(3) { --mx: -95px; --my: -44px; animation-delay: .2s; } .qclear .qc-motes > i:nth-child(4) { --mx: 104px; --my: -48px; animation-delay: .24s; }
.qclear .qc-motes > i:nth-child(5) { --mx: -48px; --my: -56px; animation-delay: .3s; } .qclear .qc-motes > i:nth-child(6) { --mx: 56px; --my: -60px; animation-delay: .34s; }
.qclear .qc-motes > i:nth-child(7) { --mx: -186px; --my: 8px; animation-delay: .4s; } .qclear .qc-motes > i:nth-child(8) { --mx: 178px; --my: 4px; animation-delay: .44s; }
.qclear .qc-motes > i:nth-child(9) { --mx: -12px; --my: -66px; animation-delay: .5s; } .qclear .qc-motes > i:nth-child(10) { --mx: 22px; --my: 26px; animation-delay: .54s; }
@keyframes qc-dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qc-rays { to { transform: rotate(360deg); } }
@keyframes qc-mote { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(1); } }

/* ---------------- ⑥ 진행 알림 · 짧은 안내(quest_notice.js — 창 층 위 가운데, 공용 위 띠 대신. G9-2A §1 #9 · 10-25 "EFZ 참고해서 퀘스트 진행상황 알림 좀 연출 퀄리티 있게").
   움직임 = EFZ obj_npc_quest_toast(들어옴 260 ms · 갱신 팝 1.05 300 ms · 티끌 6 700 ms · 4.2초 머묾 · 흐림 400 ms · 쌓임 50) 그대로.
   겉모양 = 10-25 사용자 "연출은 좋은데 이 게임 분위기랑은 안 맞는 느낌 · 이 겜이랑 맞게": EFZ 각진 갈색 판 · 채운 원 엠블럼을 걷고 이 게임 완료 연출(⑤ .qc-band ·
   지역 칭호 · 고품질UI §3 도깨비의 세계 제목 말씨)과 같은 말씨로 — 양 끝 흐린 짙은 반투명 띠(10,12,14 α.74) + 위아래 1px 빛선(금 #c8aa6e) +
   진주빛 흰 제목(#fbf6ea, 부드러운 빛) + 금빛 티끌. 엠블럼 = 얇은 고리(1.5px, 아래에서 반시계로 참) 안 마름모 표식(M · S · !).
   띠 300 × 44(불투명 칸 ≈ 180~240, 이전 판 264 와 같은 자리 · 위 끝 54). 색 = 메인 금 · 서브 회색(10-25 "서브는 회색") · 완료 가능 초록(좋아짐 색) */
.qnotice { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: var(--z-reward, 61); pointer-events: none; }
.qn-card { --ac: #e2c98a; --ring: #f0d791; --line: #c8aa6e; position: absolute; left: calc(50% - 150px); top: calc(54px + var(--qy, 0px)); width: 300px; height: 44px; box-sizing: border-box;   /* 가운데 = left 계산(창 층 #win-screen 은 margin 이 0 으로 덮여 짧은 안내만 137 px 오른쪽으로 갔다 — sandbox 10-25 실측) */
  display: flex; align-items: center; gap: 9px; padding: 0 40px 0 34px;
  background: linear-gradient(90deg, transparent 10%, var(--line) 50%, transparent 90%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 10%, var(--line) 50%, transparent 90%) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(10, 12, 14, 0), rgba(10, 12, 14, .74) 20%, rgba(10, 12, 14, .74) 80%, rgba(10, 12, 14, 0));
  transition: top .3s cubic-bezier(.2, .9, .3, 1); }
.qn-card.in { animation: qn-in .26s cubic-bezier(.33, 1, .68, 1) both; }
.qn-card.out { animation: qn-out .4s ease-in both; }
.qn-card.k-sub { --ac: #b9bcb4; --ring: #d9dbd5; --line: #8e8e88; }
.qn-card.done { --ac: #68d890; --ring: #8ff0ac; --line: #7cc896; }
.qn-card.info.t-plain { --ac: #b9bcb4; --ring: #d9dbd5; --line: #8e8e88; }
.qn-card.info.t-green { --ac: #68d890; --ring: #8ff0ac; --line: #7cc896; }
.qn-emb { position: relative; flex: none; width: 30px; height: 30px; }
.qn-emb::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle, var(--ac) 0, transparent 70%); opacity: .14; animation: qn-halo .571s ease-in-out infinite alternate; }
.qn-emb svg { position: absolute; inset: 0; width: 30px; height: 30px; }
.qn-trk { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; }
.qn-arc { fill: none; stroke: var(--ring); stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 2px var(--ring)); transform-origin: 50% 50%; transform-box: fill-box; transform: rotate(90deg) scaleY(-1); transition: stroke-dashoffset .35s ease-out, stroke .2s; }
.qn-mk { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: "QuestTitle", GFUIFont, serif; font-size: 10px; font-weight: 900; color: #fbf6ea; text-shadow: 0 0 4px var(--ac), 0 1px 1px #000; }
.qn-mk::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -7.5px 0 0 -7.5px; transform: rotate(45deg); border: 1px solid var(--line); background: rgba(10, 12, 14, .6); z-index: -1; }
.qn-chk { position: absolute; left: 12px; top: 8px; width: 6px; height: 11px; border-right: 2px solid var(--ring); border-bottom: 2px solid var(--ring); transform: rotate(40deg) scale(0); opacity: 0; filter: drop-shadow(0 0 2px var(--ring)); }
.qn-card.done .qn-mk { opacity: 0; }
.qn-card.done .qn-chk { opacity: 1; transform: rotate(40deg) scale(1); transition: transform .26s cubic-bezier(.2, .9, .3, 1.5), opacity .1s; }
.qn-card.info .qn-arc, .qn-card.info .qn-trk { stroke: var(--ac); stroke-dashoffset: 0; opacity: .45; }
.qn-sp { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.qn-sp > i { position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 5px rgba(255, 220, 140, .9); opacity: 0; }   /* 금빛 티끌(⑤ .qc-motes 와 같은 알갱이) */
.qn-card.done .qn-sp > i { background: #c8ffd8; box-shadow: 0 0 5px rgba(143, 240, 172, .9); }
.qn-card.pop .qn-sp > i { animation: qn-spark .7s ease-out both; }
.qn-sp > i:nth-child(1) { --sa: 0deg; } .qn-sp > i:nth-child(2) { --sa: 60deg; } .qn-sp > i:nth-child(3) { --sa: 120deg; } .qn-sp > i:nth-child(4) { --sa: 180deg; } .qn-sp > i:nth-child(5) { --sa: 240deg; } .qn-sp > i:nth-child(6) { --sa: 300deg; }
.qn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qn-l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.qn-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--ac); text-shadow: 0 1px 1px #000; }
.qn-num { flex: none; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: #e8e2cf; text-shadow: 0 1px 1px #000; }
.qn-card.done .qn-num { color: #c8ffd8; }
.qn-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #fbf6ea; text-shadow: 0 0 8px rgba(255, 236, 190, .35), 0 1px 2px rgba(0, 0, 0, .9); }
.qn-bar { position: relative; height: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.qn-bar > i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--line), var(--ring)); box-shadow: 0 0 4px var(--ring); transform-origin: 0 50%; transform: scaleX(0); transition: transform .35s ease-out, background .2s; }
.qn-card.info .qn-bar { display: none; }
.qn-card.info .qn-title { font-size: 11.5px; white-space: normal; line-height: 1.25; }
.qn-card.new::after { content: ""; position: absolute; inset: 1px 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 236, 190, .14) 45%, transparent 60%) -200px 0 / 200% 100% no-repeat; animation: qn-sheen .9s ease-out .1s both; }
@keyframes qn-in { from { transform: translateY(-10px) scaleX(.6); opacity: 0; } to { transform: none; opacity: 1; } }   /* 띠 열림(⑤ 완료 띠와 같은 결) */
@keyframes qn-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes qn-halo { from { transform: scale(1); opacity: .12; } to { transform: scale(1.12); opacity: .22; } }
@keyframes qn-spark { 0% { opacity: 0; transform: rotate(var(--sa)) translateX(12px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--sa) + 50deg)) translateX(24px) translateY(-6px) scale(1); } }
@keyframes qn-sheen { from { background-position: -200px 0; } to { background-position: 300px 0; } }

/* ---------------- ⑦ 이동 표시(월드 틀 'quest-move' · 'quest-move-ar' — "○○ 쪽으로 이동합니다" 위 띠 대신, G9-2A §1 #10):
   머리 위 목표 이름 알약(양 끝 흐림 · 금 글 · 걷는 점 셋) + 머리 둘레 목표 쪽 맥동 화살표(EFZ scr_beginner_guide_draw_target_arrow: 크기 맥동 .46 → .52 · 942 ms) */
#hud .w-qmove { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 14px; white-space: nowrap; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 16, 17, 0), rgba(13, 16, 17, .7) 20%, rgba(13, 16, 17, .7) 80%, rgba(13, 16, 17, 0)); animation: qm-in .25s ease-out both; }
#hud .w-qmove > span { font-size: 10.5px; font-weight: 900; color: #ffe39a; text-shadow: 0 1px 2px #000; }
#hud .w-qmove .qm-dots { display: flex; gap: 2px; }
#hud .w-qmove .qm-dots > i { width: 3px; height: 3px; border-radius: 50%; background: #ffe39a; animation: qm-dot .9s ease-in-out infinite; }
#hud .w-qmove .qm-dots > i:nth-child(2) { animation-delay: .15s; } #hud .w-qmove .qm-dots > i:nth-child(3) { animation-delay: .3s; }
#hud .w-qmove-ar { width: 0; height: 0; pointer-events: none; }
#hud .w-qmove-ar .qm-ar { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--qa, 0deg)); transition: transform .12s linear; }
#hud .w-qmove-ar .qm-ar::before, #hud .w-qmove-ar .qm-ar::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-top: 3px solid #ffd36b; border-right: 3px solid #ffd36b; border-radius: 1px;
  transform: rotate(45deg); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px rgba(255, 211, 107, .5)); animation: qm-pulse .942s ease-in-out infinite; }
#hud .w-qmove-ar .qm-ar::before { left: 24px; }
#hud .w-qmove-ar .qm-ar::after { left: 31px; opacity: .55; animation-delay: .12s; }
@keyframes qm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes qm-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes qm-pulse { 0%, 100% { translate: 0 0; scale: .92; } 50% { translate: 4px 0; scale: 1.04; } }

/* 일괄 수락 · 일괄 완료(11-04 W23): 목록 맨 위 알약 줄 — 글자 폭 알약 28(고품질UI) · 완료 = 메인 금 #e8c979(꼬리표와 같은 값) · 누름 60 ms 0.92 */
#ui .qwin .qw-bulk { flex: none; display: flex; justify-content: flex-end; gap: 6px; padding: 2px 2px 6px; }
#ui .qwin .qw-bk { flex: none; height: 28px; padding: 0 14px; border: 0; border-radius: 999px; font: 800 11.5px/28px var(--ui-font); white-space: nowrap; color: #fff; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: transform .18s cubic-bezier(.3, 1.8, .5, 1); animation: fx-card-in .36s cubic-bezier(.2, .8, .3, 1) both; }
#ui .qwin .qw-bk.gold { background: #e8c979; color: #16130d; box-shadow: inset 0 1px rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .4); }
#ui .qwin .qw-bk:active { transform: scale(.92); transition-duration: .06s; }
#ui .qwin .qw-bk.off { opacity: .45; pointer-events: none; }