/* TEMP-TEMPLATE: TR-003 TR-004 TR-005 TR-006 TR-007 TR-008 TR-009 TR-010 TR-011 TR-012 TR-013 TR-014 TR-015 TR-016 TR-017 TR-018 TR-025 TR-026 TR-027 TR-028 TR-029 TR-030 TR-031 TR-034 TR-036 TR-037 TR-038
   임시 템플릿 스타일. 정본 T0 반영 뒤 정본에 맞춰 고치고 표시를 지운다.
   값은 board-tokens.css 토큰만 쓴다. 토큰에 없는 값은 아래 :root 한 곳에만 임시 정의한다(다른 곳에 직접 값 금지). */

/* ══ TR-027~031 레이드 탭(정본 p2-DraftRaidTab1015) — TEMP-TEMPLATE: TR-027 TR-028 TR-029 TR-030 TR-031 ══ */
:root {
  --board-temp-amber-ink: #2A1A00;                    /* TR-027 주황 칩 글자 */
  --board-temp-chip-radius: 8px;                      /* TR-027 칩 모서리 */
  --board-temp-chip-pad: 2px 4px;                     /* 10-16 칩 한 줄 — 타일 폭 안에 열린방+대기자 99+가 들어가도록 좁힘 */
  --board-temp-chip-font: 9px;
  --board-temp-chip-inset: 6px;                       /* 타일 모서리 ↔ 칩 */
  --board-temp-chip-gap: 2px;
  --board-temp-tile-art: 48px;                        /* TR-027 타일 그림(64칸 안 왼쪽 아래, 안쪽 여백 5) */
  --board-temp-tile-art-gap: 5px;
  --board-temp-tile-mark: 20px;                       /* TR-027 타일 오른쪽 위 마크 */
  --board-temp-chip-z: 3;                             /* TR-027 칩 묶음은 보스 그림(1)·마크(0)보다 항상 위 */
  --board-temp-tile-h: 154px;                         /* 타일 고정 높이(예약 여백을 없앤 뒤에도 같은 크기) */
  --board-temp-card-radius: 18px;                     /* TR-028·029 카드 모서리 */
  --board-temp-noroom-pad: 20px 16px;
  --board-temp-noroom-gap: 12px;
  --board-temp-dashed-top: 12px;
  --board-temp-hint-top: 10px;
  --board-temp-notice-top: 14px;                      /* TR-031 방 없음 안내 한 줄 위 간격(정본 margin-top 14) */
}
/* TR-027 타일 칩 */
.board-tile.board-tile--chips { position: relative; height: var(--board-temp-tile-h); justify-content: center; } /* 칩은 흐름 밖(absolute) — 위 예약 여백 없이 고정 높이 안에서 내용을 세로 가운데 */
.board-tile .boss-image--lg .boss-img { left: var(--board-temp-tile-art-gap); bottom: var(--board-temp-tile-art-gap); width: var(--board-temp-tile-art); height: var(--board-temp-tile-art); }
.board-tile .boss-image--lg .boss-mark { width: var(--board-temp-tile-mark); height: var(--board-temp-tile-mark); padding: 0; }
.board-tile--room { border-color: var(--board-accent); }
.board-tile--wait { border-color: var(--board-time); }
.board-tile-chips { position: absolute; z-index: var(--board-temp-chip-z); left: var(--board-temp-chip-inset); top: var(--board-temp-chip-inset); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: var(--board-temp-chip-gap); }
.board-tile-chip { font-size: var(--board-temp-chip-font); font-weight: 800; line-height: 1.3; border-radius: var(--board-temp-chip-radius); padding: var(--board-temp-chip-pad); white-space: nowrap; }
.board-tile-chip--room { color: var(--board-accent-ink); background: var(--board-accent); }
.board-tile-chip--wait { color: var(--board-temp-amber-ink); background: var(--board-time); }
/* TR-029 열린 방 0 안내 카드 */
.board-noroom { background: var(--board-sheet-inner); border: 1px solid var(--board-surface-border); border-radius: var(--board-temp-card-radius); padding: var(--board-temp-noroom-pad); display: flex; flex-direction: column; align-items: center; gap: var(--board-temp-noroom-gap); }
.board-noroom__msg { font-size: var(--board-font-size-14); font-weight: 800; color: var(--board-text-dim); }
.board-noroom__cta { align-self: stretch; }
/* TR-030 점선 버튼 */
.board-dashed-btn { appearance: none; -webkit-appearance: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: var(--board-temp-dashed-top); height: var(--board-sheet-sub-btn-h); border-radius: var(--board-btn-radius); border: 1px dashed var(--board-pop-divider); background: transparent; font-family: var(--board-font-body); font-size: var(--board-font-size-15); font-weight: 800; color: var(--board-text-dim); text-decoration: none; cursor: pointer; }
.board-dashed-btn:active { opacity: var(--board-press-dim); }
.board-dashed-btn:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
/* TR-031 보스 시트 보조 버튼·안내 (보조 기본 모양은 공통 .btn--sub). 방 없음은 버튼 없이 안내 한 줄(--notice, 정본 13·text-dim·1.5) */
.board-sheet-sub[hidden] { display: none; }
.board-sheet-hint { margin: var(--board-temp-hint-top) 0 0; text-align: center; font-size: var(--board-font-size-12); color: var(--board-text-faint); }
.board-sheet-hint--notice { margin-top: var(--board-temp-notice-top); font-size: var(--board-font-size-13); line-height: 1.5; color: var(--board-text-dim); word-break: keep-all; }

/* ══ TR-003 시트 머리 (제목 · 닫기 · 한 줄 안내) — .board-qj-sheet__head 와 같은 모양 ══ */
.board-sheet-head { display: flex; align-items: baseline; justify-content: space-between; }
.board-sheet-head__title { font-family: var(--board-font-display); font-size: 22px; }
.board-sheet-head__close {
  appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--board-text-faint); cursor: pointer; min-height: 44px; min-width: 44px; text-align: right; align-self: center;
}
.board-sheet-head__sub { font-size: 13px; color: var(--board-text-dim); word-break: keep-all; margin-top: -4px; }

/* ══ TR-015 내 정보 링크 행 (정본 p3-MyInfoMerged2 .row) — TEMP-TEMPLATE: TR-015 ══ */
:root {
  --board-temp-link-row-h: 56px;    /* 정본 .row min-height 56 — 토큰에 56 없음 */
  --board-temp-link-row-gap: 12px;  /* 정본 .row gap 12 */
}
.board-link-row {
  display: flex; align-items: center; gap: var(--board-temp-link-row-gap); min-height: var(--board-temp-link-row-h);
  border-bottom: 1px solid var(--board-divider); color: var(--board-text); text-decoration: none;
}
.board-link-row:last-child { border-bottom: none; }
/* 링크색 규칙 `body.board-body a`(0,1,2)·`a:hover`(0,2,2)에 지지 않게 특이도를 올린다 — 제목은 정본 흰색(--board-text) */
body.board-body a.board-link-row,
body.board-body a.board-link-row:hover { color: var(--board-text); }
.board-link-row__title { flex: 1; min-width: 0; font-size: var(--board-font-size-15); font-weight: 700; }
.board-link-row__chip {
  flex-shrink: 0; font-size: var(--board-font-size-11); font-weight: 800; white-space: nowrap;
  border-radius: var(--board-chip-radius); padding: var(--board-chip-pad-state);
  color: var(--board-accent); background: var(--board-open-bg);
}
.board-link-row__count { flex-shrink: 0; font-size: var(--board-font-size-12); color: var(--board-text-faint); }
.board-link-row__chev { flex-shrink: 0; color: var(--board-text-faint); }
.board-link-row:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-link-row:active { opacity: var(--board-press-dim); }

/* ════════════════════════════════════════════════════════════════════════════
   운영자 보스 화면 개편(PRD-052 / TICKET-650) — TR-010 보스 타일·격자·성급 ×N · TR-011 묶음 머리 ·
   TR-012 접힌 묶음 · TR-013 실행 상세 보스 행 · TR-014 안내 카드.
   아래 var()는 **아직 board-tokens.css에 없는 이름이 많다**(@backend-dev가 추가 — 값·출처는 doc/reports/TICKET-650/designer.md "추가할 토큰").
   이 블록에는 직접 값을 쓰지 않는다. 견본 html은 doc/design/temp-templates/admin-boss-tokens-proposed.css 로 같은 이름을 미리 정의한다.
   ════════════════════════════════════════════════════════════════════════════ */

/* ══ TR-010 성급 ×N (T0-F F-7 계열 — 크기 3종) ══ */
.board-stars-n { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--board-stars-n-gap); height: var(--board-stars-n-h); flex-shrink: 0; }
.board-stars-n__icon { object-fit: contain; opacity: var(--board-stars-n-icon-opacity); }
.board-stars-n__num { font-family: var(--board-font-mono); font-weight: 700; }
.board-stars-n--tile .board-stars-n__icon { width: var(--board-stars-n-tile-w); height: var(--board-stars-n-tile-h); }
.board-stars-n--tile .board-stars-n__num { font-size: var(--board-font-size-10); color: var(--board-text-dim); }
.board-stars-n--row .board-stars-n__icon,
.board-stars-n--sheet .board-stars-n__icon { width: var(--board-stars-n-row-w); height: var(--board-stars-n-row-h); }
.board-stars-n--row .board-stars-n__num { font-size: var(--board-font-size-11); color: var(--board-text-soft); }
.board-stars-n--sheet .board-stars-n__num { font-size: var(--board-font-size-12); color: var(--board-text-soft); }

/* ══ TR-010 4열 격자 + 타일 ══ */
.board-boss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--board-boss-grid-gap); margin-top: var(--board-boss-grid-top); }
.board-boss-tile {
  appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: center;
  position: relative; box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--board-boss-tile-gap);
  padding: var(--board-boss-tile-pad); border-radius: var(--board-boss-tile-radius);
  border: 1px solid var(--board-surface-border); background: var(--board-surface);
}
.board-boss-tile--hidden { opacity: var(--board-boss-tile-hidden-opacity); }
.board-boss-tile:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-boss-tile:active { opacity: var(--board-press-dim); }
.board-boss-tile--hidden:active { opacity: var(--board-boss-tile-hidden-opacity); }
.board-boss-tile__art,
.board-run-boss__art { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--board-sheet-inner); }
.board-boss-tile__art { width: var(--board-boss-art-sm); height: var(--board-boss-art-sm); border-radius: var(--board-boss-art-sm-radius); }
.board-boss-tile__name {
  max-width: 100%; font-size: var(--board-font-size-11); font-weight: 800; color: var(--board-boss-tile-name);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-boss-tile__flag {
  position: absolute; top: var(--board-boss-badge-inset); font-size: var(--board-font-size-9); font-weight: 800;
  border-radius: var(--board-boss-badge-radius); padding: var(--board-boss-badge-pad);
}
.board-boss-tile__flag { right: var(--board-boss-badge-inset); }
/* 종류 태그 한 벌 — 타일 모서리(--tile)와 실행 행·시트 머리 이름 뒤(--row)가 같은 색 표를 쓴다. 메가는 배경도 따로 칠한다 */
.board-boss-kind { flex-shrink: 0; white-space: nowrap; font-weight: 800; border-radius: var(--board-boss-badge-radius); background: var(--board-kind-tag-bg); }
.board-boss-kind--tile { position: absolute; top: var(--board-boss-badge-inset); left: var(--board-boss-badge-inset); font-size: var(--board-font-size-9); padding: var(--board-boss-badge-pad); }
.board-boss-kind--row { font-size: var(--board-font-size-10); padding: var(--board-boss-tag-pad); }
.board-boss-kind--mega { color: var(--board-kind-mega); background: var(--board-kind-mega-bg); }
.board-boss-kind--dynamax { color: var(--board-kind-dynamax); }
.board-boss-kind--gigantamax { color: var(--board-kind-gigantamax); }
.board-boss-kind--shadow { color: var(--board-kind-shadow); }
.board-boss-tile__flag--manual { color: var(--board-time); background: var(--board-depart-chip-bg); }
.board-boss-tile__flag--hidden { color: var(--board-text-dim); background: var(--board-divider); }
.board-boss-tile__flag--source { top: auto; right: auto; bottom: var(--board-boss-badge-inset); left: var(--board-boss-badge-inset); color: var(--board-text-dim); background: var(--board-divider); }
.board-boss-tile__flag--exposure { top: auto; left: auto; bottom: var(--board-boss-badge-inset); right: var(--board-boss-badge-inset); color: var(--board-time); background: var(--board-depart-chip-bg); }

/* ══ TR-011 묶음 머리 ══ */
.board-boss-head { display: flex; align-items: baseline; gap: var(--board-boss-head-gap); margin-top: var(--board-boss-head-top); font-family: var(--board-font-body); }
.board-boss-head--list { padding-bottom: var(--board-boss-head-list-pad-bottom); }
.board-boss-head__title { font-size: var(--board-font-size-13); font-weight: 800; color: var(--board-text); }
.board-boss-head__count { font-family: var(--board-font-mono); font-size: var(--board-font-size-13); font-weight: 700; }
.board-boss-head__count--accent { color: var(--board-accent); }
.board-boss-head__count--new { color: var(--board-boss-count-new); }
.board-boss-head__count--end { color: var(--board-rule); }
.board-boss-head__count--warn { color: var(--board-time); }
.board-boss-head__link { margin-left: auto; font-size: var(--board-font-size-13); font-weight: 800; color: var(--board-accent); text-decoration: none; white-space: nowrap; }
body.board-body a.board-boss-head__link,
body.board-body a.board-boss-head__link:hover { color: var(--board-accent); }

/* ══ TR-012 접힌 묶음 줄 + 펼침 ══ */
.board-boss-fold {
  appearance: none; font: inherit; color: var(--board-text); cursor: pointer; text-align: left; width: 100%; box-sizing: border-box;
  margin-top: var(--board-boss-fold-top); padding: var(--board-boss-fold-pad); border-radius: var(--board-boss-fold-radius);
  border: 1px solid var(--board-surface-border); background: var(--board-surface); opacity: var(--board-boss-dim-opacity);
  display: flex; align-items: center; justify-content: space-between;
}
.board-boss-fold:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-boss-fold__label { font-size: var(--board-font-size-13); font-weight: 800; }
.board-boss-fold__count { font-family: var(--board-font-mono); color: var(--board-text-dim); }
.board-boss-fold__toggle { font-size: var(--board-font-size-13); font-weight: 800; color: var(--board-accent); white-space: nowrap; }
.board-boss-fold__body[hidden] { display: none; }
.board-boss-fold__body .board-boss-grid { opacity: var(--board-boss-dim-opacity); }

/* ══ TR-013 실행 상세 보스 행 (row) · 시트 머리 줄 (sheet) ══ */
.board-run-boss { display: flex; align-items: center; gap: var(--board-boss-row-gap); font-family: var(--board-font-body); }
.board-run-boss__main { flex: 1; min-width: 0; }
.board-run-boss__name { display: flex; align-items: center; gap: var(--board-boss-row-name-gap); font-weight: 800; }
.board-run-boss__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* TICKET-683 — 긴 이름은 이름만 말줄임 */
.board-run-boss__period { display: block; color: var(--board-text-dim); }
.board-run-boss--row { padding: var(--board-boss-row-pad-y) 0; border-bottom: 1px solid var(--board-divider); }
.board-run-boss--row .board-run-boss__art { width: var(--board-boss-art-sm); height: var(--board-boss-art-sm); border-radius: var(--board-boss-art-sm-radius); }
.board-run-boss--row .board-run-boss__name { font-size: var(--board-font-size-14); }
.board-run-boss--row .board-run-boss__period { margin-top: var(--board-boss-row-period-top); font-family: var(--board-font-mono); font-size: var(--board-font-size-12); white-space: nowrap; }
.board-run-boss__reason { margin-left: var(--board-run-reason-gap); font-size: var(--board-font-size-10); font-weight: 800; color: var(--board-text-dim); background: var(--board-kind-tag-bg); border-radius: var(--board-boss-badge-radius); padding: var(--board-boss-tag-pad); } /* TR-013 보강(TICKET-667) — 종료 줄 사유 꼬리표 */
.board-run-boss--dim { opacity: var(--board-boss-dim-opacity); }
.board-run-boss--dim .board-run-boss__period { color: var(--board-text-faint); }
.board-run-boss--sheet .board-run-boss__art { width: var(--board-boss-art-lg); height: var(--board-boss-art-lg); border-radius: var(--board-boss-art-lg-radius); }
.board-run-boss--sheet .board-run-boss__name { font-size: var(--board-font-size-17); }
.board-run-boss--sheet .board-run-boss__period { margin-top: var(--board-boss-sheet-period-top); font-size: var(--board-font-size-12); color: var(--board-text-faint); }

/* ══ TR-014 안내(경고) 카드 ══ */
.board-notice-card { display: flex; flex-direction: column; background: var(--board-amber-notice-bg); border: 1px solid var(--board-amber-tint-border); font-family: var(--board-font-body); }
.board-notice-card__title { font-size: var(--board-font-size-14); font-weight: 800; color: var(--board-text); }
.board-notice-card__desc { font-size: var(--board-font-size-12); color: var(--board-text-dim); }
.board-notice-card--sm { border-radius: var(--board-notice-card-sm-radius); padding: var(--board-notice-card-sm-pad); gap: var(--board-notice-card-sm-gap); }
.board-notice-card--md { border-radius: var(--board-notice-card-md-radius); padding: var(--board-notice-card-md-pad); gap: var(--board-notice-card-md-gap); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   TEMP-TEMPLATE: TR-004 TR-005 TR-006 TR-007 TR-008 TR-009 — 홈 3묶음 부품(TICKET-647, PRD-051 AC-1)
   정본 p2-HomeA · p2-HomeA2EmptyRec. 값은 전부 토큰이다. 아래 이름 중 board-tokens.css에 아직 없는 것
   (--board-radius-* · --board-home-*)은 @backend-dev가 이 티켓에서 추가한다(이름 = 값 목록은 doc/reports/TICKET-647/designer.md).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* 자리표시 아이콘(보스 그림이 없을 때, 정본 p2-HomeA의 그림 자리) */
.board-home-ph { width: 50%; height: 50%; color: var(--board-footer-text); }
.board-home-ph--chip { width: var(--board-home-ph-chip); height: var(--board-home-ph-chip); }

/* ══ TR-005 보스 타일 + 가로 한 줄 틀(TR-008 칩 줄도 같이 쓴다) ══ */
.board-home-strip {
  display: flex; gap: var(--board-home-strip-gap); margin-top: var(--board-home-strip-top);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.board-home-strip::-webkit-scrollbar { display: none; }
.board-home-strip--locked { opacity: var(--board-home-locked-opacity); pointer-events: none; filter: grayscale(var(--board-home-locked-gray)); }
.board-home-tile {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  flex: 1 0 var(--board-home-tile-basis); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--board-home-tile-gap);
}
.board-home-tile:active { opacity: var(--board-press-dim); }
.board-home-tile:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-home-tile__img {
  box-sizing: border-box; flex-shrink: 0; width: var(--board-home-tile-img); height: var(--board-home-tile-img); border-radius: var(--board-radius-14);
  background: var(--board-sheet-inner); display: flex; align-items: center; justify-content: center; position: relative;
}
.board-home-tile__img { border: 1px solid var(--board-surface-border); }
.board-home-tile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--board-font-size-11); font-weight: 700; color: var(--board-text-soft); white-space: nowrap; } /* TICKET-682 */

/* ══ TR-006 빈 상자 (dashed 점선 / solid 실선) ══ */
.board-home-empty {
  box-sizing: border-box; display: block; margin-top: var(--board-home-body-top); text-align: center; text-decoration: none;
  background: var(--board-surface); border: 1px dashed var(--board-surface-border); border-radius: var(--board-radius-16); padding: var(--board-home-empty-pad);
}
.board-home-empty--solid { border-style: solid; }
.board-home-empty__msg { display: block; font-size: var(--board-font-size-13); color: var(--board-text-faint); }
.board-home-empty__cta { display: block; margin-top: var(--board-home-empty-link-top); font-size: var(--board-font-size-13); font-weight: 800; color: var(--board-link); }
body.board-body a.board-home-empty, body.board-body a.board-home-empty:hover { color: var(--board-text-faint); }
a.board-home-empty:active { opacity: var(--board-press-dim); }
a.board-home-empty:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }

/* ══ TR-026 트레이너 0명 빈 상태 (TR-006 빈 상자 점선 + 공통 .btn.p) ══ */
.board-trainer-empty {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; text-align: center;
  background: var(--board-surface); border: 1px dashed var(--board-surface-border); border-radius: var(--board-radius-16); padding: var(--board-home-empty-pad);
}
.board-trainer-empty__msg { margin: 0; font-size: var(--board-font-size-15); font-weight: 800; color: var(--board-text); }
.board-trainer-empty__desc { margin: var(--board-home-empty-link-top) 0 0; font-size: var(--board-font-size-13); color: var(--board-text-faint); }
.board-trainer-empty__cta { margin-top: var(--board-sheet-gap); }

/* ══ TR-008 보스 일정 칩 ══ */
.board-home-chip {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--board-home-chip-gap);
}
.board-home-strip--schedule { gap: var(--board-home-chip-strip-gap); overflow: hidden; }
/* 보스 일정 그림 칸(boss_schedule_art, TICKET-708) — 배경·테두리 없음, 그림 왼쪽 아래 · 레이드 마크 오른쪽 위 */
.board-bs-art { position: relative; box-sizing: border-box; flex-shrink: 0; width: var(--board-home-tile-img); height: var(--board-home-tile-img); display: flex; align-items: flex-end; justify-content: flex-start; }
.board-bs-art__img { position: relative; z-index: 1; display: flex; }
.board-bs-art .board-bs-art__comp { position: absolute; left: 0; top: 0; } /* 공용 boss_image(52칸) — 그림·마크 크기만 아래에서 덮어쓴다 */
.board-bs-art .board-bs-art__comp .boss-img { inset: auto; left: 0; bottom: 0; width: var(--board-bs-art-pic); height: var(--board-bs-art-pic); }
.board-bs-art .board-bs-art__comp .boss-mark { width: var(--board-bs-art-mark); height: var(--board-bs-art-mark); padding: 0; }
.board-home-chip__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--board-font-size-11); font-weight: 700; color: var(--board-text-dim); white-space: nowrap; } /* TICKET-682 */
.board-home-chip__when { font-family: var(--board-font-mono); font-size: var(--board-font-size-11); font-weight: 600; color: var(--board-time); white-space: nowrap; }

/* ══ TR-016 메가 등급 선택 줄 (정본 p2-AdminBosses 수동 입력 시트 — 칸 모양은 성급 칸 .ss-box와 같은 44 높이 상자, 선택 강조는 보스 선택 칸의 하늘 테두리) — TEMP-TEMPLATE: TR-016 ══ */
:root {
  --board-temp-pick-gap: 8px;       /* 선택 칸 사이 간격(정본 시작·종료 두 칸 사이 8) */
  --board-temp-pick-h: 52px;        /* 라벨 + ×N 두 줄이라 44보다 높다(보스 선택 칸 높이 52와 같은 값) */
}
.board-pick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--board-temp-pick-gap); border: 0; margin: 0; padding: 0; min-width: 0; }
.board-pick-row[hidden] { display: none; }
.board-pick-row__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.board-pick-row__opt { display: block; min-width: 0; cursor: pointer; }
.board-pick-row__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.board-pick-row__box {
  box-sizing: border-box; height: var(--board-temp-pick-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--board-surface-border); border-radius: var(--board-radius-12); background: var(--board-surface);
  font-family: var(--board-font-body); color: var(--board-text-faint);
}
.board-pick-row__label { max-width: 100%; padding: 0 4px; box-sizing: border-box; font-size: var(--board-font-size-13); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-pick-row__sub { font-family: var(--board-font-mono); font-size: var(--board-font-size-11); font-weight: 700; color: var(--board-text-faint); }
.board-pick-row__input:checked + .board-pick-row__box { border: 1.5px solid var(--board-accent); background: var(--board-accent-tint); color: var(--board-text); }
.board-pick-row__input:checked + .board-pick-row__box .board-pick-row__sub { color: var(--board-accent); }
.board-pick-row__input:focus-visible + .board-pick-row__box { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-pick-row__opt:active .board-pick-row__box { opacity: var(--board-press-dim); }

/* ══ TR-017 트레이너 아바타 (정본 p3-TrainerAvatarKit — 링 3 · 안쪽 바탕 · 그림 = 지름 − 8 · 이니셜 = 지름 × 0.5 Chakra Petch 700) — TEMP-TEMPLATE: TR-017 ══ */
:root {
  --board-temp-avatar-ring: 3px;    /* 팀 색 링 두께(사용자 확정 10-12) */
  --board-temp-avatar-inset: 8px;   /* 그림 = 지름 − 8 (링 3×2 + 안쪽 여백 1×2) */
  --board-temp-avatar-initial-ratio: .5; /* 이니셜 글자 = 지름 × 0.5 */
}
.board-avatar {
  /* 지름은 쓰는 쪽이 --board-avatar-d 로 준다(동적 값). 글자색·글로우·바탕은 쓰는 화면이 --board-avatar-initial-color/-glow/-bg 로 준다. */
  position: relative; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  width: var(--board-avatar-d); height: var(--board-avatar-d); border-radius: 50%;
  border: var(--board-temp-avatar-ring) solid var(--board-team-none); background: var(--board-bg);
}
.board-avatar--blue { border-color: var(--board-team-blue); }
.board-avatar--red { border-color: var(--board-team-red); }
.board-avatar--yellow { border-color: var(--board-team-yellow); }
.board-avatar--none { border-color: var(--board-team-none); }
.board-avatar__art {
  display: block; object-fit: contain; /* 정본 견본: 그림은 contain, 모서리 둥글림 없음 */
  width: calc(var(--board-avatar-d) - var(--board-temp-avatar-inset)); height: calc(var(--board-avatar-d) - var(--board-temp-avatar-inset));
}
.board-avatar__initial {
  font-family: var(--board-font-mono); font-weight: 700; line-height: 1; user-select: none;
  font-size: calc(var(--board-avatar-d) * var(--board-temp-avatar-initial-ratio));
  color: var(--board-avatar-initial-color, var(--board-text)); text-shadow: var(--board-avatar-initial-glow, none);
}
.board-avatar:not(.board-avatar--art) { background: var(--board-avatar-bg, var(--board-bg)); }
/* 그림이 있으면 이니셜은 숨김, 그림 실패(JS가 .is-failed 를 붙임)면 그림을 숨기고 이니셜을 보인다 */
.board-avatar--art .board-avatar__initial { display: none; }
.board-avatar--art.is-failed .board-avatar__art { display: none; }
.board-avatar--art.is-failed .board-avatar__initial { display: block; }

/* /dev/preview 아바타 견본(정본 p3-TrainerAvatarKit 구성: 크기 × 팀 5종 × 이니셜/파트너) — dev 전용 배치 */
:root { --board-temp-avatar-kit-gap: 8px; --board-temp-avatar-kit-pad: 20px; --board-temp-avatar-kit-i34: 34px; --board-temp-avatar-kit-i28: 28px; --board-temp-avatar-kit-i22: 22px; }
.board-avatar-kit__i34 .board-avatar__initial { font-size: var(--board-temp-avatar-kit-i34); } /* 정본 견본 이니셜 74 → 34 */
.board-avatar-kit__i28 .board-avatar__initial { font-size: var(--board-temp-avatar-kit-i28); } /* 62 → 28 · 52 → 28 */
.board-avatar-kit__i22 .board-avatar__initial { font-size: var(--board-temp-avatar-kit-i22); } /* 52 파트너 칸 → 22 */
.board-avatar-kit { display: flex; flex-direction: column; gap: calc(var(--board-temp-avatar-kit-gap) * 1.5); padding: 0 var(--board-temp-avatar-kit-pad) var(--board-temp-avatar-kit-pad); }
.board-avatar-kit__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--board-temp-avatar-kit-gap); }
.board-avatar-kit__label { flex: none; width: 100%; font-size: var(--board-font-size-13); font-weight: 800; color: var(--board-text-faint); }

/* ══ TR-018 검색 칸 (정본 p3-MyTrainerPartnerSheet — 높이 44 · 모서리 12 · 위 14 · 돋보기 18 + 간격 8 · 안쪽 좌우 14) — TEMP-TEMPLATE: TR-018 ══ */
:root {
  --board-temp-search-h: 44px;      /* 칸 높이 */
  --board-temp-search-top: 14px;    /* 시트 제목 쪽과의 간격(칸 위 바깥 여백) */
  --board-temp-search-gap: 8px;     /* 돋보기 ↔ 입력 */
  --board-temp-search-pad-x: 14px;  /* 안쪽 좌우 */
  --board-temp-search-icon: 18px;   /* 돋보기 크기 */
  --board-temp-search-box-top: 10px; /* 검색 칸 바로 아래 목록 상자와의 간격(정본 p3-MyTrainerPartnerSheet 10 — 보스 시트 .g2a-box 14와 다름) */
}
.board-search {
  box-sizing: border-box; flex-shrink: 0; margin-top: var(--board-temp-search-top); height: var(--board-temp-search-h);
  display: flex; align-items: center; gap: var(--board-temp-search-gap); padding: 0 var(--board-temp-search-pad-x);
  border: 1px solid var(--board-surface-border); border-radius: var(--board-radius-12); background: var(--board-sheet-inner);
  color: var(--board-text-faint); cursor: text;
}
.board-search__icon { flex: none; width: var(--board-temp-search-icon); height: var(--board-temp-search-icon); }
.board-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.board-search__input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: none; outline: none; background: transparent; appearance: none;
  font-family: var(--board-font-body); font-size: var(--board-font-size-16); color: var(--board-text);
}
.board-search__input::placeholder { color: var(--board-text-faint); }
.board-search:focus-within { border-color: var(--board-accent); }
.board-search + .g2a-box { margin-top: var(--board-temp-search-box-top); } /* 검색 슬롯이 있는 시트에서만(보스 시트는 검색 칸이 없어 .g2a-box 14 그대로) */

/* ══ TR-019 파트너 칸 (정본 T0-E E-17 · p3-MyTrainerEdit·EditPartner — 높이 68 · 링 52 · 그림 44 · ›) ══ */
:root {
  --board-temp-partner-h: 68px;          /* 칸 높이 */
  --board-temp-partner-gap: 14px;        /* 아바타 · 글 · › 사이 */
  --board-temp-partner-pad: 0 12px 0 10px; /* 정본 padding */
  --board-temp-partner-text-gap: 3px;    /* 이름 줄 ↔ 안내 줄 */
  --board-temp-partner-chev: 18px;       /* › 아이콘 */
}
.board-partner-field {
  appearance: none; box-sizing: border-box; width: 100%; height: var(--board-temp-partner-h); text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: var(--board-temp-partner-gap); padding: var(--board-temp-partner-pad);
  font-family: inherit; color: var(--board-text-faint);
  background: var(--board-surface); border: 1px solid var(--board-surface-border); border-radius: var(--board-radius-12);
}
.board-partner-field__avatar { flex-shrink: 0; display: inline-flex; }
.board-partner-field__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--board-temp-partner-text-gap); }
.board-partner-field__title { font-size: var(--board-font-size-15); font-weight: 700; color: var(--board-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-partner-field__sub { font-size: var(--board-font-size-12); font-weight: 500; color: var(--board-text-faint); }
.board-partner-field__chev { flex-shrink: 0; width: var(--board-temp-partner-chev); height: var(--board-temp-partner-chev); }
.board-partner-field--picked .board-partner-field__title { color: var(--board-text); } /* 고른 상태: 이름은 본문색 */
.board-partner-field:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-partner-field:active { opacity: var(--board-press-dim); }

/* ══ TR-020 헤더 동작 아이콘 (정본 T0-E E-18 · p3-MyTrainerEdit 헤더 휴지통 — 터치 44 · 아이콘 22 · 코랄) ══ */
.board-header-action {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; width: var(--board-back-btn); height: var(--board-back-btn);
  color: var(--board-danger-text);
}
.board-header-action__icon { display: block; width: var(--board-back-icon); height: var(--board-back-icon); }
.board-header-action:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-header-action:active { opacity: var(--board-press-dim); }
.board-header-action:disabled { opacity: var(--board-row-btn-disabled-opacity); cursor: default; pointer-events: none; }
/* TR-037 톱니 변형 — <a>로도 그려지므로 링크색 규칙(body.board-body a)에 지지 않게 특이도를 올린다. 정본 stroke #A7B0C8 */
.board-header-action--gear,
body.board-body a.board-header-action--gear,
body.board-body a.board-header-action--gear:hover { color: var(--board-text-dim); text-decoration: none; }

/* ══ TR-036 로그인 수단 줄 (정본 p3-AccountManage1021·1021b — TEMP-TEMPLATE: TR-036) ══ */
:root {
  --board-temp-login-badge: 32px;         /* TR-036 제공자 배지 크기 */
  --board-temp-login-badge-radius: 10px;  /* TR-036 카카오 배지 모서리(토큰 없음) */
  --board-temp-login-badge-g-ink: #3C4043; /* TR-036 구글 배지 글자(정본 값, 토큰 없음) */
}
.board-login-method {
  display: flex; align-items: center; gap: var(--board-temp-link-row-gap); min-height: var(--board-temp-link-row-h);
  border-bottom: 1px solid var(--board-divider);
}
.board-login-method:last-child { border-bottom: none; }
.board-login-method__badge {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: var(--board-temp-login-badge); height: var(--board-temp-login-badge); font-weight: 800;
}
.board-login-method__badge--kakao {
  border-radius: var(--board-temp-login-badge-radius); background: var(--board-kakao-bg); color: var(--board-kakao-text);
  font-size: var(--board-font-size-14);
}
.board-login-method__badge--google {
  border-radius: 50%; background: var(--board-text); color: var(--board-temp-login-badge-g-ink);
  font-size: var(--board-font-size-15);
}
.board-login-method__name { flex: 1; min-width: 0; font-size: var(--board-font-size-15); font-weight: 700; }
.board-login-method__chip {
  flex-shrink: 0; font-size: var(--board-font-size-11); font-weight: 800; white-space: nowrap;
  border-radius: var(--board-chip-radius); padding: var(--board-chip-pad-state);
  color: var(--board-accent); background: var(--board-open-bg);
}
.board-login-method__btn {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; flex-shrink: 0;
  min-height: var(--board-back-btn); margin-left: var(--board-row-btn-gap);
  font-family: inherit; font-size: var(--board-font-size-13); font-weight: 800;
}
.board-login-method__btn--link { color: var(--board-accent); }
.board-login-method__btn--unlink { color: var(--board-text-dim); }
.board-login-method__btn--last { color: var(--board-footer-text); cursor: default; pointer-events: none; }
.board-login-method__btn:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-login-method__btn:not(:disabled):active { opacity: var(--board-press-dim); }

/* ══ TR-038 위험 글자 링크 줄 (정본 p3-AccountManage1021 "탈퇴하기" — TEMP-TEMPLATE: TR-038) ══ */
.board-danger-text-link {
  display: flex; align-items: center; justify-content: center; min-height: var(--board-back-btn);
  font-size: var(--board-font-size-13); font-weight: 700; text-decoration: none; color: var(--board-danger-text);
}
body.board-body a.board-danger-text-link,
body.board-body a.board-danger-text-link:hover { color: var(--board-danger-text); text-decoration: none; }
.board-danger-text-link:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-danger-text-link:active { opacity: var(--board-press-dim); }

/* ══ TR-021·TR-022 파트너 선택 시트 타일 (정본 T0-E E-19·E-20 · p3-MyTrainerPartnerSheet .tile — 비율 1:1.2 · 안쪽 10/4 · 그림 칸 64 · 이름 15)
   공용 바깥 틀 .board-partner-tile 한 벌 + TR-021 [선택 안 함](.board-partner-none, 안에 TR-017 아바타 52) / TR-022 포켓몬(그림 60)
   ══ */
:root {
  --board-temp-partner-tile-ratio: 1 / 1.2;   /* 칸 비율(= 보스 카드 5/6) */
  --board-temp-partner-tile-pad: 10px 4px;    /* 안쪽 위아래 · 좌우 */
  --board-temp-partner-tile-gap: 6px;         /* 그림 칸 ↔ 이름 */
  --board-temp-partner-tile-art: 64px;        /* 그림 칸 */
  --board-temp-partner-tile-img: 60px;        /* 포켓몬 그림(칸 안 2px 안쪽) */
  --board-temp-partner-tile-img-inset: 2px;   /* 그림 left·top */
}
.board-partner-tile {
  appearance: none; box-sizing: border-box; width: 100%; aspect-ratio: var(--board-temp-partner-tile-ratio); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--board-temp-partner-tile-gap);
  padding: var(--board-temp-partner-tile-pad); border: 1px solid var(--board-divider); border-radius: var(--board-radius-14);
  background: var(--board-card-bg); color: var(--board-text); font-family: var(--board-font-body);
}
.board-partner-tile__art { flex: none; position: relative; width: var(--board-temp-partner-tile-art); height: var(--board-temp-partner-tile-art); display: flex; align-items: center; justify-content: center; }
.board-partner-tile__img {
  position: absolute; z-index: 1; left: var(--board-temp-partner-tile-img-inset); top: var(--board-temp-partner-tile-img-inset);
  width: var(--board-temp-partner-tile-img); height: var(--board-temp-partner-tile-img); object-fit: contain; object-position: center;
}
.board-partner-tile__name { font-size: var(--board-font-size-15); font-weight: 700; white-space: nowrap; color: var(--board-text-faint); }
.board-partner-tile.on { border-color: var(--board-accent); }
.board-partner-tile.on .board-partner-tile__name { font-weight: 800; color: var(--board-accent); text-shadow: 0 0 8px var(--board-accent-glow); }
.board-partner-tile:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 2px; }
.board-partner-tile:active { opacity: var(--board-press-dim); }
/* TR-021 전용 — 그림 칸 자리에 들어가는 아바타 */
.board-partner-none__avatar { --board-avatar-initial-color: var(--board-text); }
.board-partner-none__avatar .board-avatar__initial { font-size: var(--board-partner-field-initial-font); } /* 22 — 부품 기본 26을 이 화면 정본 값으로 덮어씀 */

/* ══ TR-025 첫 글자 아바타 (T0-E E-22 제안 · 정본 p3-SignupDoneDraft 88/40/3 · 헤더 칩 18/11 · md 64/32/3은 비례 추정)
   토큰은 board-tokens.css(TICKET-814)
   ══ */
.board-initial-avatar {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1;
  border-radius: 50%; background: var(--board-bg); border: var(--board-initial-avatar-border) solid var(--board-accent); color: var(--board-accent);
  width: var(--board-initial-avatar-d); height: var(--board-initial-avatar-d); font-size: var(--board-initial-avatar-font); font-family: var(--board-font-display);
}
.board-initial-avatar--lg { --board-initial-avatar-d: var(--board-initial-avatar-lg); --board-initial-avatar-font: var(--board-initial-avatar-lg-font); --board-initial-avatar-border: var(--board-initial-avatar-lg-border); }
.board-initial-avatar--md { --board-initial-avatar-d: var(--board-initial-avatar-md); --board-initial-avatar-font: var(--board-initial-avatar-md-font); --board-initial-avatar-border: var(--board-initial-avatar-md-border); }
.board-initial-avatar--chip {
  --board-initial-avatar-d: var(--board-initial-avatar-chip); --board-initial-avatar-font: var(--board-initial-avatar-chip-font); --board-initial-avatar-border: var(--board-initial-avatar-chip-border);
  background: var(--board-surface); font-family: var(--board-font-body); font-weight: 800;
}

/* ══ TR-034 리스트타일 + 스위치 그룹 카드 (운영자 광고 설정) — TEMP-TEMPLATE: TR-034
   카드는 운영자 스위치 카드(.si-row)와 같은 바탕·테두리·모서리 18, 구분선은 --board-divider, 보조 글자는 위 .si-row__meta 계열(11 faint) ══ */
:root {
  --board-temp-lsw-radius: 18px;                /* 그룹 카드 모서리(.si-row 와 같다) */
  --board-temp-lsw-pad-x: 16px;                 /* 카드 안 좌우 */
  --board-temp-lsw-row-pad-y: 10px;             /* 줄 위아래(스위치 터치 44 가 줄 높이를 정한다) */
  --board-temp-lsw-gap: 12px;                   /* 글자 칸 ↔ 스위치 */
  --board-temp-lsw-title-size: 13px;            /* 그룹 제목 */
  --board-temp-lsw-label-size: 14px;            /* 줄 제목 */
  --board-temp-lsw-sub-size: 11px;              /* 보조 줄 */
  --board-temp-lsw-dim-opacity: .45;            /* 흐림 상태 */
  --board-temp-lsw-switch-touch: 44px;          /* 스위치 터치 영역(가로·세로) */
  --board-temp-lsw-track-w: 44px;               /* 스위치 몸통 */
  --board-temp-lsw-track-h: 26px;
  --board-temp-lsw-knob: 20px;                  /* 손잡이 */
  --board-temp-lsw-knob-inset: 3px;
}
.board-lsw {
  box-sizing: border-box; display: flex; flex-direction: column; min-width: 0;
  background: var(--board-card-bg); border: 1px solid var(--board-surface-border); border-radius: var(--board-temp-lsw-radius);
  padding: 0 var(--board-temp-lsw-pad-x);
}
.board-lsw--strong { background: var(--board-accent-tint); border-color: var(--board-accent); }
.board-lsw__title { margin: 0; padding: 12px 0 0; font-size: var(--board-temp-lsw-title-size); font-weight: 800; color: var(--board-text-dim); }
.board-lsw__note {
  margin: 8px 0 0; padding: 6px 10px; border-radius: var(--board-radius-8);
  font-size: var(--board-font-size-12); line-height: 1.5; color: var(--board-time); background: var(--board-time-bg); word-break: keep-all;
}
.board-lsw__rows { display: flex; flex-direction: column; }
.board-lsw__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--board-temp-lsw-gap);
  padding: var(--board-temp-lsw-row-pad-y) 0;
}
.board-lsw__row + .board-lsw__row { border-top: 1px solid var(--board-divider); }
.board-lsw--dim .board-lsw__rows { opacity: var(--board-temp-lsw-dim-opacity); }
.board-lsw__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.board-lsw__label { font-size: var(--board-temp-lsw-label-size); font-weight: 800; color: var(--board-text); }
.board-lsw__sub { font-size: var(--board-temp-lsw-sub-size); line-height: 1.5; color: var(--board-text-faint); word-break: keep-all; }
.board-lsw__switch {
  flex: none; box-sizing: border-box; width: var(--board-temp-lsw-switch-touch); height: var(--board-temp-lsw-switch-touch);
  display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.board-lsw__track {
  position: relative; box-sizing: border-box; width: var(--board-temp-lsw-track-w); height: var(--board-temp-lsw-track-h);
  border-radius: calc(var(--board-temp-lsw-track-h) / 2); background: var(--board-btn-secondary-bg); border: 1px solid var(--board-surface-border);
  transition: background var(--board-press-ms), border-color var(--board-press-ms);
}
.board-lsw__knob {
  position: absolute; top: 50%; left: var(--board-temp-lsw-knob-inset); width: var(--board-temp-lsw-knob); height: var(--board-temp-lsw-knob);
  margin-top: calc(var(--board-temp-lsw-knob) / -2 - 1px); border-radius: 50%; background: var(--board-text-faint);
  transition: transform var(--board-press-ms), background var(--board-press-ms);
}
.board-lsw__switch[aria-checked="true"] .board-lsw__track { background: var(--board-accent); border-color: var(--board-accent); }
.board-lsw__switch[aria-checked="true"] .board-lsw__knob {
  background: var(--board-accent-ink);
  transform: translateX(calc(var(--board-temp-lsw-track-w) - var(--board-temp-lsw-knob) - var(--board-temp-lsw-knob-inset) * 2 - 2px));
}
.board-lsw__switch:active .board-lsw__knob { opacity: var(--board-press-dim); }
.board-lsw__switch:focus-visible { outline: 2px solid var(--board-accent); outline-offset: -2px; border-radius: var(--board-radius-12); }
.board-lsw__switch:disabled { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .board-lsw__track, .board-lsw__knob { transition: none; } }