/* 아바타 작업방 전용 CSS — 2026-08-24 신설
 *
 * 🔴 왜 styles.css 가 아닌가
 *    본체 창(main)과 아바타 창(avatar)이 같은 저장소를 나눠 쓴다.
 *    styles.css 를 양쪽에서 고치면 합칠 때 충돌한다.
 *    📋 docs/CLAUDE_HANDOFF.md 「두 창으로 일하기」 규칙 2
 *
 * ⚠️ 캐시 키는 avatar.html 의 <link ...?v=> 에 붙는다. 이 파일을 고치면
 *    scripts/bump-cache-key.cjs 의 TARGETS 에 avatar.css 가 들어 있는지 확인한다.
 */

/* ── 동작 고르기 줄 ────────────────────────────────────────────────────────
   몸에 뼈가 들어오면서 Tripo 가 준 클립 4개를 시험할 자리.
   클립이 없으면 JS 가 [hidden] 을 걸어 통째로 숨긴다. */

body[data-page="detail"] .avatar-motion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 0 4px;
}

body[data-page="detail"] .avatar-motion[hidden] {
  display: none;
}

body[data-page="detail"] .avatar-motion__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--detail-ink-soft, #6b5f52);
  flex: none;
}

body[data-page="detail"] .avatar-motion__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-page="detail"] .avatar-motion__btn {
  /* 손가락으로 누를 수 있는 크기 — 44 미만으로 내리지 않는다.
     📋 「손가락으로 못 누르는 것 38개」 사고가 이 기준에서 나왔다. */
  min-width: 44px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--detail-line, #e2d8c9);
  background: rgba(255, 255, 255, 0.72);
  color: var(--detail-ink, #4a3f35);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body[data-page="detail"] .avatar-motion__btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

body[data-page="detail"] .avatar-motion__btn.is-active {
  background: var(--detail-accent, #7fbfa5);
  border-color: var(--detail-accent, #7fbfa5);
  color: #fff;
}

/* ── 닉네임 — 어두운 알약 + 발바닥 ─────────────────────────────────
   📋 SPEC_아바타-상점-개편_2026-08-27.md
   > 사장님(2026-08-28): 「폰트도 마음에 안 들고 흰색 검정 테두리 너무 별로.
   >   어두운 알약으로 하고, 이름 앞에 발바닥 넣어줘」

   🔴 **글자색만으로는 못 푼다.** 08-28 에 배경 아홉 장의 좌측 상단을 다시 쟀다 —
      평균색이 아니라 **그 칸에서 가장 밝은 5%** 로. 최악을 봐야 맞다.

        흰 글자   아홉 중 **일곱**이 기준(4.5) 미달
                  sunny-room 1.00 · painters-room 1.00 · seaside-deck 1.00
        검은 글자 셋이 미달 (velvet-stage 1.37 · neon-balcony 3.68)
        🔴 neon-gameroom 은 흰 3.88 · 검 4.48 로 **둘 다** 미달이다

      ⚠️ 앞 판에서 「흰 + 남색 테두리면 서로를 받친다」고 적었는데, 그건 **평균색**
         기준이었다. 흰 벽 앞에서는 대비가 1.00 이라 테두리를 아무리 잘 그려도
         글자 속이 안 읽힌다. 테두리는 **글자 가장자리**만 살릴 뿐이다.

   → 알약이 **제 바탕을 갖는다.** 배경이 무엇이든 대비가 한 값으로 고정되고,
     배경이 늘어나도 다시 잴 일이 없다.

   ⚠️ 크림(밝은) 알약도 읽히지만 **어두운 배경에서 시선을 먼저 가져간다.**
      주인공은 고양이다 — 이름표는 물러나 있어야 한다.
   ⚠️ Jua(제목용 둥근 글씨)를 안 쓴다. 작은 글자에서 뭉갠다. 이름은 읽는 것이다.
   ⚠️ backdrop-filter 를 못 쓰는 브라우저는 그냥 불투명 0.78 로 보인다 — 안 깨진다. */
body[data-page="detail"] .avatar-stage-card .avatar-stage-name {
  top: calc(var(--u) * 10);
  left: calc(var(--u) * 12);
  right: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  max-width: 62%;
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 11) 0 calc(var(--u) * 9);
  border-radius: 999px;
  background: rgba(20, 24, 36, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fffcf6;
  font-family: inherit;             /* Pretendard */
  font-size: calc(var(--u) * 13);
  font-weight: 500;
  line-height: 1;
  text-align: left;
  text-shadow: none;                /* 옛 여덟 방향 테두리를 끈다 */
}

/* 발바닥 — 그림 파일을 안 쓴다. 글자색을 따라가므로 색을 따로 안 맞춰도 된다 */
body[data-page="detail"] .avatar-stage-card .avatar-stage-name::before {
  content: "";
  flex: none;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='6' ry='5'/%3E%3Cellipse cx='5.4' cy='10.6' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.8' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='14.6' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='18.8' cy='10.6' rx='2.5' ry='3.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='6' ry='5'/%3E%3Cellipse cx='5.4' cy='10.6' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.8' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='14.6' cy='7.4' rx='2.5' ry='3.3'/%3E%3Cellipse cx='18.8' cy='10.6' rx='2.5' ry='3.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 갈래 탭 다섯이 폭을 넘던 것 ───────────────────────────────────
   재 봤다 (375px · 2026-08-27)
     담는 칸 안쪽 304px  ·  탭 합 299 + 사이 24 = 323  → **19px 넘쳤다**
   글자를 16 → 14 로, 좌우 여백을 16 → 11 로 줄이면 286 이라 들어온다.
   ⚠️ `.detail-tabs` 는 부티크·갤러리 등 **여덟 화면이 같이 쓴다.**
      `data-view="avatar"` 로 이 화면만 좁힌다. */
body[data-view="avatar"] .detail-tabs {
  gap: calc(var(--u) * 5);
}
body[data-view="avatar"] .detail-tab[data-wardrobe-tab] {
  font-size: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 11);
}

/* ── 모션 줄의 위아래 간격을 맞춘다 ────────────────────────────────
   재 봤다 — 위 15px · 아래 0px 로 어긋나 있었다.
   위쪽은 무대 카드의 margin-bottom 이 만들고(이웃 여백이 합쳐진다),
   아래쪽은 아무도 안 만들고 있었다. **카드와 같은 배수**를 아래에도 준다.
   ⚠️ 카드는 `calc(var(--u) * 16)` = 15.38px 다. 15 로 주면 14.42 가 되어
      1px 어긋난다 — 눈에는 안 보여도 「통일해 달라」는 말과 어긋난다. */
body[data-view="avatar"] .avatar-motionbar {
  margin-bottom: calc(var(--u) * 16);
}