/* 입력 칸(T0-E E-9)·아바타 고르기(T0-E E-10) 부품 (TICKET-653, PRD-049/AC-10)
   board-tokens.css(:root 변수)만 의존한다. 색·크기·간격은 토큰만 — 직접 값 0. 정본: screens/p3-MyEdit3.html. */

.field-block + .field-block { margin-top: var(--board-field-section-gap); }
.field-block__label { display: block; font-size: var(--board-font-size-12); color: var(--board-text-faint); margin-bottom: var(--board-field-label-gap); }
.field-block__optional { color: var(--board-footer-text); }
/* 필수 표시(정본 p3-MyTrainerEdit·Add): 라벨 800 · 밝은 글자, 앞의 `*`는 하늘색 */
.field-block__label--required { font-weight: 800; color: var(--board-text-soft); }
.field-block__req { color: var(--board-accent); }

/* 칸: 높이 48(border-box) · 모서리 12 · 바탕 surface · 테두리 surface-border · 글자 15 */
.field-box { box-sizing: border-box; display: flex; align-items: center; height: var(--board-field-h); padding: var(--board-field-pad); border-radius: var(--board-field-radius); border: 1px solid var(--board-surface-border); background: var(--board-surface); font-size: var(--board-font-size-15); color: var(--board-text); }
.field-box:focus-within { border-color: var(--board-accent); }
.field-box__input { flex: 1; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--board-font-size-16); color: inherit; }
.field-box__input::placeholder { color: var(--board-footer-text); }
.field-box__input--code { font-family: var(--board-font-mono); color: var(--board-text-soft); letter-spacing: var(--board-code-spacing); }
.field-box__input--code::placeholder { font-family: var(--board-font-body); letter-spacing: 0; } /* 정본: 빈 칸 "0000 0000 0000"은 본문 글꼴, 입력하면 Chakra Petch */
.field-box__count { flex-shrink: 0; margin-left: var(--board-field-count-gap); font-family: var(--board-font-mono); font-size: var(--board-font-size-12); color: var(--board-footer-text); }
/* 주사위: 칸 안 오른쪽 36 상자 — 칸 오른쪽 안 여백으로 파고든다 */
.field-box__dice { box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--board-dice-size); height: var(--board-dice-size); margin: 0 var(--board-dice-bleed) 0 var(--board-dice-gap); padding: 0; border-radius: var(--board-dice-radius); border: 1px solid var(--board-surface-border); background: var(--board-btn-secondary-bg); color: var(--board-accent); cursor: pointer; }
.field-box__dice:disabled { cursor: not-allowed; }

/* 아바타 고르기: 6열 × 3줄, 칸 44 원, 상자 모서리 12 · 안 여백 12 14 */
.avatar-grid { box-sizing: border-box; display: grid; grid-template-columns: repeat(var(--board-avatar-grid-cols), var(--board-avatar-grid-btn)); justify-content: space-between; row-gap: var(--board-avatar-grid-row-gap); padding: var(--board-avatar-grid-pad); border-radius: var(--board-avatar-grid-radius); border: 1px solid var(--board-surface-border); background: transparent; }
.avatar-grid__btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: var(--board-avatar-grid-btn); height: var(--board-avatar-grid-btn); padding: 0; border-radius: 50%; border: var(--board-avatar-grid-on-w) solid transparent; background: transparent; font-size: var(--board-avatar-grid-emoji); line-height: 1; cursor: pointer; }
.avatar-grid__btn.is-on { border-color: var(--board-accent); background: var(--board-accent-tint); }