/* 레이어 아바타 (frontend/src/components/AvatarFigure.tsx, lib/avatar.ts).
   크기·걷기 애니메이션은 parts.css 의 .parts-figure / .parts-part 규칙을 그대로 쓴다.
   부위 이미지는 모두 같은 캔버스라 inset: 0 으로 겹치면 제자리에 놓인다. */
.avatar-figure .avatar-layer { position: absolute; inset: 0; display: block; background-repeat: no-repeat; background-size: 100% 100%; }
.avatar-figure .avatar-face { background-size: contain; background-position: center; }
.avatar-figure .avatar-hair { transition: filter .2s ease; }
.avatar-figure .avatar-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* 마이페이지 '내 모습' */
.body-picker, .hair-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.body-card, .hair-card {
  display: grid; justify-items: center; gap: 2px; padding: 6px 8px; min-width: 92px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; background: var(--color-surface, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font: inherit;
}
.body-card.is-current, .hair-card.is-current { border-color: var(--color-sun, #f5b83d); }
.body-card small, .hair-card small { color: var(--color-muted, #777); font-size: .75rem; max-width: 120px; }
.body-card-figure, .hair-card-figure { display: flex; align-items: flex-end; justify-content: center; height: 96px; }
.hair-card-figure { height: 72px; }
.body-card-figure .parts-figure, .hair-card-figure .parts-figure { height: 100%; }
.body-card-figure .parts-sizer, .hair-card-figure .parts-sizer { height: 100%; width: auto; }
.body-card-legacy { font-size: 2.2rem; align-items: center; }

.avatar-editor { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: start; }
.avatar-preview { position: sticky; top: 72px; display: grid; gap: 6px; }
.avatar-stage {
  display: flex; align-items: flex-end; justify-content: center; height: 280px; padding: 8px; border-radius: 12px;
  background: repeating-conic-gradient(#f2f0ea 0 25%, #fbfaf6 0 50%) 0 0 / 16px 16px;
}
.avatar-stage .parts-figure { height: 100%; }
.avatar-stage .parts-sizer { height: 100%; width: auto; }
.avatar-controls { display: grid; gap: 12px; min-width: 0; }
.avatar-group { border: 1px solid var(--color-line, #e5e1d8); border-radius: 12px; padding: 8px 12px 12px; display: grid; gap: 6px; min-width: 0; }
.avatar-group legend { font-weight: 700; padding: 0 4px; }
.avatar-upload { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.avatar-upload-thumb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 10px 10px; overflow: hidden; }
.avatar-upload-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avatar-upload input[type=file] { max-width: 100%; }
.check-row { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.hair-color { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hair-color-pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.hair-color input[type=color] { width: 56px; height: 36px; padding: 2px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; background: #fff; cursor: pointer; }
.hair-color small { flex-basis: 100%; }
.avatar-savebar { position: sticky; bottom: 8px; z-index: 2; padding: 6px 8px; border-radius: 10px; background: var(--color-surface, #fff); box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }

/* 포즈·표정 설정, 포즈 편집기 */
.look-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 14px; align-items: end; margin-bottom: 10px; }
.look-grid label { display: grid; gap: 3px; font-size: .88rem; }
.look-grid label.check-row { display: flex; }
.mood-map { margin: 6px 0 12px; }
.mood-map summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.custom-poses { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.custom-poses .btn.is-current { outline: 2px solid var(--color-sun, #f5b83d); }
.pose-editor { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 16px; align-items: start; padding: 10px; margin-bottom: 12px;
  border-radius: 12px; border: 1px dashed var(--color-sun, #f5b83d); }
.pose-editor-controls { display: grid; gap: 6px; min-width: 0; }
.pose-editor-stage { position: sticky; top: 72px; }

/* 관리자: 공용 몸 관절 맞추기 */
.pivot-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; align-items: start; }
.pivot-stage { height: 460px; }
.pivot-canvas { position: relative; display: inline-block; height: 100%; line-height: 0; }
.pivot-canvas .parts-figure { height: 100%; }
.pivot-hit { position: absolute; inset: 0; cursor: crosshair; outline: 1px dashed rgba(0, 0, 0, .25); }
.pivot-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2px solid #333; pointer-events: none; }
.pivot-dot.is-active { background: #ffd34e; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.pivot-face { position: absolute; aspect-ratio: 1; translate: -50% -50%; border: 2px dashed #e07b00; border-radius: 6px; pointer-events: none; }
.pivot-controls { display: grid; gap: 10px; }
.pivot-list { display: flex; flex-wrap: wrap; gap: 4px; }
.pivot-list .btn.is-current { outline: 2px solid var(--color-sun, #f5b83d); }
.pivot-list small { opacity: .7; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .avatar-editor, .pose-editor { grid-template-columns: 1fr; }
  .avatar-preview, .pose-editor-stage { position: static; }
  .avatar-stage { height: 220px; }
  .pivot-stage { height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-figure .avatar-hair { transition: none; }
}

/* 마이페이지는 패널이 두 칸으로 놓인다: 내 모습·포즈 편집은 넓게 */
/* 37차: 캐릭터 이미지 | 포즈·표정 나란히, 그 아래 내 모습 넓게 */
#avatar.panel { grid-column: 1 / -1; }
.avatar-group > *, .avatar-upload > div { min-width: 0; }
.avatar-upload .field-row { flex-wrap: wrap; }
.pose-editor .rig-slider { grid-template-columns: 9.5em 1fr 3em; }

/* 내 몸·내 머리 직접 올리기 */
.own-upload { margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--color-line, #d9cdb8); border-radius: 12px; background: var(--color-surface-soft, rgba(255, 255, 255, .5)); }
.own-upload > summary { cursor: pointer; font-weight: 700; }
.own-upload > summary small { font-weight: 400; }
.own-upload-form { display: grid; gap: 10px; margin-top: 8px; }
.own-upload-name input { max-width: 16em; }
.own-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.own-part { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.own-part > div { display: grid; gap: 2px; min-width: 0; }
.own-part input[type=file] { max-width: 100%; }