/* ============================================================
   AURA — 등급 장식·계급 표식 정본 (AURA-GRADE-05 에서 aura.css 에서 갈라 냄)
   설치: public/css/aura-marks.css   ※aura-tokens.css 를 먼저 걸어야 색이 산다.
   ★한 벌뿐이다 — 회원 화면(aura.css 뒤에 건다)과 관리자 [회원 등급]·[회원 계급]
     미리보기가 같은 이 파일을 읽는다. 관리자용으로 따로 그리면 고른 것과 실화면이
     어긋난다 (AURA-GRADE-05 ③).
   ★아래 「미리보기·고르개」 절만 관리자 전용이고, 그 위는 회원 화면에서 옮겨 온 원본 그대로다.
   ============================================================ */

/* ── 말풍선 바탕 (aura.css 대화 화면 절에서 옮겨 옴) ────────── */
.a-msg__b{
  display:inline-block;text-align:left;
  padding:11px 14px;border-radius:16px 16px 16px 4px;
  background:var(--bg-2);border:1px solid var(--line);
  font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:break-word;
}
.a-msg.is-me .a-msg__b{
  border-radius:16px 16px 4px 16px;
  background:var(--gold-dim);border-color:var(--line-strong);
}
.a-msg__t{font-size:11px;color:var(--tx-3);margin-top:5px}

/* ============================================================
   등급별 채팅 말풍선 장식 (AURA-CHAT-02 · 2026-07-31)
   ★맨 위 「금색은 돈에만」 규칙의 예외가 아니다 — 여기서 금색은 등급 표시이고
     등급은 곧 얼마를 쓰셨는가라, 이 화면에서는 금색이 돈의 연장선이다.
   장식은 RA(남성) 말풍선에만 붙고, 어느 등급에 무엇을 줄지는 관리자가 매핑한다.
   상시 애니메이션은 두지 않는다 — 가독성·배터리, 심야 라운지 정본의 절제 원칙.
   ============================================================ */

.a-gbadge{
  display:inline-block;vertical-align:middle;
  margin-left:5px;padding:1px 7px;border-radius:99px;
  font-size:10px;font-weight:600;line-height:1.7;letter-spacing:.02em;
  color:var(--gold);background:var(--gold-dim);border:1px solid var(--line-strong);
}
.a-msg__t .a-gbadge{margin-left:0;margin-right:3px}

/* 장식이 붙은 말풍선은 반짝임을 담을 그릇이 된다 */
.a-msg__b--deco{position:relative;overflow:hidden}

/* 장식 세 벌의 정본은 여기 한 곳이다 — 말풍선(a-msg__b--*)과 카드 테두리(a-deco--*)가
   같은 규칙을 나눠 쓴다. 같은 등급이면 대화방과 프로필의 테두리가 같아진다 (AURA-GRADE-03). */

/* 은은한 라인 */
.a-msg__b--line,.a-deco--line{border-color:rgba(217,178,106,.45)}

/* 금장 테두리 */
.a-msg__b--gold,.a-deco--gold{
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(217,178,106,.28);
}

/* 금장 + 광채 */
.a-msg__b--glow,.a-deco--glow{
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(217,178,106,.32),0 0 12px rgba(217,178,106,.22);
}

/* 상위 등급은 정지 외곽선이 아니라 실제 광택·발광으로 읽힌다 (1607/1633/1638). */
.a-msg__b--gold,.a-msg__b--glow,.a-chathead--prestige,.a-thread--prestige{
  position:relative;overflow:hidden;isolation:isolate;
}

/* ── 등급 3층 차등 (AURA-0805-1633-01) ───────────────────────
   주인 정본 = 빛나고(glow)·반짝이고(shimmer)·움직이는(animation) 셋이 실제로 보여야 한다.
   얇은 외곽선은 화려가 아니다 — 층이 올라갈수록 연출을 하나씩 ★얹는다(아래 층 것을 빼지 않는다).
     line(하위) = 은은한 금 테두리                              — 정지
     gold(중위) = 금 테두리 + 숨쉬는 발광                        — ::before(opacity)
     glow(상위) = 금장 프레임 + 발광 + 광택 훑기 + 반짝임 입자 + 뱃지 동조 발광
                                                              — ::before(opacity) + ::after(transform)
   ★움직이는 속성은 opacity·transform 둘뿐이다 — 둘 다 합성 스레드에서 돌아 저사양에서도 끊기지 않는다
     (뱃지 하나만 예외로 box-shadow 를 쓴다 — 대화당 1개라 부담이 없다).
   ★연출은 테두리·바깥·뒤에만 둔다 — 두 겹 모두 z-index:-1 이라 글자보다 아래에 깔리고,
     글자색·글자 배경은 1도 건드리지 않아 대비가 그대로다(가독성 사수, 백로그 ③).
   ---------------------------------------------------------- */

/* 숨쉬는 발광 — 중위부터. 안쪽 테두리 광이 밝아졌다 어두워진다(움직이는 것은 opacity 하나뿐) */
.a-msg__b--gold::before,.a-msg__b--glow::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,228,166,.85),inset 0 0 16px rgba(217,178,106,.5);
  opacity:.2;animation:a-deco-breathe 3.2s ease-in-out infinite;
}
/* 상위만 — 같은 겹에 미세 반짝임 입자를 흩뿌리고, 맥동을 한 박자 빠르게 */
.a-msg__b--glow::before{
  background:
    radial-gradient(circle at 13% 27%,rgba(255,246,220,.95) 0,transparent 1.7px),
    radial-gradient(circle at 62% 13%,rgba(255,246,220,.8) 0,transparent 1.3px),
    radial-gradient(circle at 87% 61%,rgba(255,246,220,.9) 0,transparent 1.6px),
    radial-gradient(circle at 33% 83%,rgba(255,246,220,.75) 0,transparent 1.2px),
    radial-gradient(circle at 74% 89%,rgba(255,246,220,.85) 0,transparent 1.5px);
  animation-duration:2.2s;
}
/* 광택 훑기 — 상위 전용. 대각으로 말풍선을 훑고 지나간다(움직이는 것은 transform 하나뿐) */
.a-msg__b--glow::after,.a-chathead--prestige::after{
  /* 겹을 제 몸보다 조금만 넓게 잡는다 — 너무 넓으면 띠가 말풍선 밖에서만 놀아 「지나가는」 것이 안 보인다 */
  content:'';position:absolute;z-index:-1;pointer-events:none;inset:-45% -12%;
  /* 띠를 넓게 잡는다 — 좁은 실금은 작은 말풍선에서 그냥 스쳐 지나가 보이지 않는다(실캡처로 잡은 자리) */
  background:linear-gradient(105deg,transparent 30%,rgba(255,238,189,.3) 42%,rgba(255,248,218,.66) 50%,rgba(255,238,189,.3) 58%,transparent 70%);
  transform:translateX(-95%);animation:a-prestige-sweep 3.6s ease-in-out infinite;
}
/* 금장 프레임 — 상위 말풍선만 바깥으로도 빛이 샌다 */
.a-msg__b--glow{box-shadow:inset 0 0 0 1px rgba(217,178,106,.45),0 0 14px rgba(217,178,106,.3)}
/* 이름 뱃지 동조 발광 — 상위 말풍선의 등급 뱃지가 ::before 와 같은 박자(2.2s)로 빛난다 */
.a-msg--glow .a-gbadge{border-color:var(--gold);animation:a-deco-badge 2.2s ease-in-out infinite}
@keyframes a-deco-breathe{0%,100%{opacity:.2}50%{opacity:.95}}
@keyframes a-deco-badge{0%,100%{box-shadow:0 0 4px rgba(217,178,106,.22)}50%{box-shadow:0 0 14px rgba(217,178,106,.75)}}

.a-chathead--prestige{animation:a-prestige-pulse 2.8s ease-in-out infinite}
.a-chathead--prestige{border:1px solid rgba(217,178,106,.72);border-radius:16px;padding:10px 12px;background:linear-gradient(115deg,rgba(217,178,106,.14),rgba(18,15,25,.12) 55%)}
.a-chathead--prestige .a-gbadge,.a-chathead--prestige .a-rbadge,.a-thread--prestige .a-gbadge,.a-thread--prestige .a-rbadge{box-shadow:0 0 10px rgba(217,178,106,.32)}
.a-chathead--prestige .a-marks__b{animation:a-prestige-spark 1.8s ease-in-out 3}
.a-thread--prestige{border-color:rgba(217,178,106,.42);background:linear-gradient(100deg,rgba(217,178,106,.09),transparent 62%)}
.a-thread--prestige .a-thread__t b{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
@keyframes a-prestige-sweep{0%,55%{transform:translateX(-90%)}85%,100%{transform:translateX(90%)}}
@keyframes a-prestige-pulse{0%,100%{box-shadow:0 0 8px rgba(217,178,106,.18)}50%{box-shadow:0 0 18px rgba(217,178,106,.38)}}
@keyframes a-prestige-spark{0%,100%{filter:brightness(1)}50%{filter:brightness(1.55)}}

/* ── 방 입장 첫인상 (AURA-0805-1638-01) ──────────────────
   주인 정본 = 「들어온 순간 상대의 등급·계급이 설명 없이 한눈에 각인된다」.
   무대는 말풍선이 아니라 ★머리다 — 말풍선은 대화가 오간 뒤에야 보이기 때문이다.
   ★상시 과잉 금지 — 광택은 입장 ★1회만 훑고, 그 뒤에 남는 것은 은은한 상시 발광뿐이다.
   ★두 축을 함께 본다 — 등급이 glow 이거나 계급이 왕관·월계면 「상위」로 본다(a-*--top).
   ────────────────────────────────────────── */
/* 광택은 상위에만. 그 아래 층은 테두리 + 숨쉬는 발광까지다 */
.a-chathead--prestige:not(.a-chathead--top)::after{content:none}
.a-chathead--prestige:not(.a-chathead--top) .a-marks__b{animation:none}
/* 입장 1회 — 끝나면 광택 겹은 오른쪽 밖에 멈춰 서고 상시 발광(a-prestige-pulse)만 남는다.
   ★말풍선의 a-prestige-sweep 을 그대로 쓰지 않는다 — 그 셈은 다음 바퀴를 기다리는 멈춤(0~55%)을
   품고 있어 1회로 끊으면 정작 띠가 보이는 구간이 짧다. 입장 연출은 멈춤 없이 한 번에 훑는다. */
.a-chathead--prestige::after{animation:a-prestige-enter 1.4s ease-in-out .25s 1 forwards}
@keyframes a-prestige-enter{from{transform:translateX(-90%)}to{transform:translateX(90%)}}
/* 상위 방 머리는 한 단 위로 — 금장 테두리·금빛 바탕·조금 빠른 맥동 */
.a-chathead--top{border-color:var(--gold);background:linear-gradient(115deg,rgba(217,178,106,.22),rgba(18,15,25,.12) 58%);animation-duration:2.2s}
/* 두 축 뱃지가 같은 박자로 함께 빛난다 — 등급·계급이 한눈에 들어오게 */
.a-chathead--top .a-gbadge,.a-chathead--top .a-rbadge{animation:a-deco-badge 2.2s ease-in-out infinite}
/* 계급 뱃지는 위 두 계급만 금장으로 올라선다 — 문장(왕관·월계)은 그대로라 등급 축과 섞이지 않는다 */
.a-rbadge--crown,.a-rbadge--laurel{color:var(--gold);background:var(--gold-dim);border-color:rgba(217,178,106,.6)}

/* 목록에서도 들어가기 전부터 다르게 보인다 (AURA-0805-1638-01 ④) —
   행이 여러 개라 상시 애니메이션은 두지 않는다. 광택은 목록이 뜰 때 두 번만 지나간다. */
.a-thread--top{border-color:rgba(217,178,106,.6);background:linear-gradient(100deg,rgba(217,178,106,.18),transparent 66%);box-shadow:inset 3px 0 0 rgba(217,178,106,.75)}
.a-thread--top .a-gbadge,.a-thread--top .a-rbadge{box-shadow:0 0 12px rgba(217,178,106,.45)}
.a-thread--top::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;inset:-45% -12%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,238,189,.26) 42%,rgba(255,248,218,.5) 50%,rgba(255,238,189,.26) 58%,transparent 70%);
  transform:translateX(-95%);animation:a-prestige-enter 1.6s ease-in-out .2s 2 forwards;
}

/* ── 계급 문장 (AURA-GRADE-03) ───────────────────────────────
   등급이 테두리라면 계급은 문장이다 — 두 축이 한눈에 갈리도록 색과 모양을 나눈다.
   금색은 돈에만 쓰는 규칙이라(맨 위 주석) 계급 뱃지는 중성색으로 두고 문장으로만 구분한다.
   문장은 CSS 글자 하나다 — 이미지를 쓰지 않는다.
   ---------------------------------------------------------- */
.a-rbadge{
  display:inline-block;vertical-align:middle;
  margin-left:5px;padding:1px 7px;border-radius:99px;
  font-size:10px;font-weight:600;line-height:1.7;letter-spacing:.02em;
  color:var(--tx-2);background:var(--surf-2);border:1px solid var(--line);
}
.a-msg__t .a-rbadge{margin-left:0;margin-right:3px}
.a-rbadge::before{margin-right:3px;font-size:9px}
.a-rbadge--star::before{content:'\2605'}
.a-rbadge--gem::before{content:'\25C6'}
.a-rbadge--crown::before{content:'\265B'}
.a-rbadge--laurel::before{content:'\2766'}
.a-rbadge--star,.a-rbadge--gem,.a-rbadge--crown,.a-rbadge--laurel{
  color:var(--tx-1);border-color:rgba(255,255,255,.22);
}

/* 뱃지가 줄로 설 때 — 좁은 화면에서 두 줄로 접힌다 */
.a-marks{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px}
.a-marks .a-gbadge,.a-marks .a-rbadge{margin-left:0}

/* 보낸 직후 두 번만 광택이 훑고 지나간다. 끝나면 상시 장식만 남는다 —
   transform 한 가지만 움직여 긴 대화방 스크롤에 부담을 주지 않는다. */
.a-msg__b--deco.is-new::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,241,214,.34) 50%,transparent 60%);
  transform:translateX(-120%);
  animation:a-sheen 1.15s ease-out 2;
}
@keyframes a-sheen{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
@media (prefers-reduced-motion:reduce){
  .a-msg__b--deco.is-new::after,.a-msg__b--glow::after,.a-chathead--prestige::after,.a-thread--top::after{display:none}
  /* 숨쉬는 겹은 지우지 않고 세운다 — 멈춘 채로 밝게 두면 등급은 그대로 읽히고 움직임만 사라진다 */
  .a-msg__b--gold::before,.a-msg__b--glow::before{animation:none;opacity:.6}
  .a-msg--glow .a-gbadge,.a-chathead--prestige,.a-chathead--prestige .a-marks__b{animation:none}
  /* 입장 연출도 함께 멈춰 선다 (AURA-0805-1638-01) — 표시(금장 테두리·뱃지 색)는 그대로 남는다 */
  .a-chathead--top,.a-chathead--top .a-gbadge,.a-chathead--top .a-rbadge{animation:none}
}

/* 등급 안내 레이어(GRADE-04) 등급표의 연출 미리보기 (AURA-0805-1633-01 ⑤).
   ★따로 그리지 않는다 — 회원 말풍선 클래스를 그대로 걸어 실물이 곧 미리보기가 된다.
   표 칸에 들어가므로 크기만 줄이고 한 줄로 세운다. */
.a-gspv{font-size:11px;padding:5px 10px;line-height:1.5;white-space:nowrap;border-radius:12px 12px 12px 3px}

/* ── 뱃지가 단추가 되는 자리 (aura.css 안내 팝업 절에서 옮겨 옴) ──
   관리자 미리보기도 같은 부분뷰(member._marks)를 부르므로 여기 함께 둔다.
   다만 관리자 화면에는 안내 팝업이 없어 눌러도 아무 일도 일어나지 않는다. */
.a-marks__b{display:inline-flex;align-items:center;gap:5px;cursor:pointer;vertical-align:middle}
.a-marks__b:focus-visible{outline:1px solid var(--gold);outline-offset:3px;border-radius:99px}

/* ============================================================
   미리보기·고르개 — 관리자 전용 (AURA-GRADE-05)
   회원 화면에는 이 클래스가 하나도 붙지 않는다. 여기서 하는 일은 둘뿐이다:
   ① 밝은 관리자 바탕 위에 회원 화면과 같은 잉크빛 판을 깔고
   ② 그 위에 위쪽 절의 장식·표식을 그대로 세운다.
   ============================================================ */

/* 잉크빛 판 — 관리자 문서에는 회원 body 가 없으므로 이 그릇이 대신한다 */
.a-mk{
  background:var(--bg-1);color:var(--tx-1);
  font-family:var(--f-body);font-size:13px;line-height:1.6;
  border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;
}

/* 고르개 — 프리셋을 실물로 늘어놓고 고른 것을 밝힌다 */
/* 표 칸 안에서도 ★나란히 서야 한다 — min-width 가 없으면 칸이 좁혀 세로로 접힌다.
   표는 이미 .scroll 안이라 넘치면 가로로 민다 (AURA-GRADE-05 ①). */
.a-mkpick{display:flex;flex-wrap:wrap;gap:8px;min-width:470px;max-width:620px}
.a-mkpick__o{
  position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  padding:8px 9px;border-radius:var(--r-s);border:1px solid transparent;cursor:pointer;
}
.a-mkpick__o input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.a-mkpick__v{display:block;border-radius:var(--r-s);padding:2px}
.a-mkpick__n{font-size:11px;color:var(--tx-2)}
.a-mkpick__o input:checked ~ .a-mkpick__v{outline:1px solid var(--gold);outline-offset:3px}
.a-mkpick__o input:checked ~ .a-mkpick__n{color:var(--gold);font-weight:600}
.a-mkpick__o input:checked ~ .a-mkpick__n::before{content:'✓ ';font-size:10px}
.a-mkpick__o input:focus-visible ~ .a-mkpick__v{outline:2px solid var(--gold);outline-offset:3px}
.a-mkpick .a-msg__b{font-size:12px;padding:8px 11px;white-space:nowrap}

/* 미리보기 — 회원이 보게 될 세 자리(말풍선·프로필·랭킹)를 예시 자료로 세운다 */
.a-mkpv{display:grid;gap:14px}
.a-mkpv__h{font-size:13px;color:var(--tx-2)}
.a-mkpv__h b{color:var(--gold)}
.a-mkpv__t{font-size:10px;color:var(--tx-3);letter-spacing:.04em;margin-bottom:6px}
.a-mkpv__chat{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.a-mkpv__chat .a-msg{max-width:100%}
.a-mkpv__chat .a-msg.is-me{align-self:flex-end;text-align:right}
.a-mkpv__panel{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:12px 14px;
}
.a-mkpv__sub{font-size:11px;color:var(--tx-3);margin-top:4px}
.a-mkpv__row{
  display:flex;align-items:center;gap:7px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;
}
.a-mkpv__row:last-child{border-bottom:0}
.a-mkpv__rank{width:20px;color:var(--gold);font-variant-numeric:tabular-nums}
.a-mkpv__amt{margin-left:auto;color:var(--gold);font-style:normal;font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .a-mkpick{min-width:0;max-width:100%}
}

/* ── 인증 배지 (AURA-VERIF-01 ③) ─────────────────────────────
   등급(금빛)·계급(문장)과 축이 다르다 — 인증은 사실 확인이라 색을 쓰지 않는다.
   금색은 돈에만 쓴다는 원칙을 지키려고 여기서는 담백한 회선 배지로 둔다.
   붙는 자리(프로필·탐색 카드·랭킹 행·채팅 상대)가 전부 이 한 벌을 읽는다. */
.a-vbadges{display:inline-flex;flex-wrap:wrap;gap:3px;vertical-align:middle;margin-left:5px}
.a-vbadge{
  display:inline-block;padding:1px 6px;border-radius:99px;
  font-size:10px;font-weight:600;line-height:1.7;letter-spacing:.02em;
  color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line);
}
.a-card__name .a-vbadge{font-size:9px;padding:0 5px}