/* 보스 일정 부품 T0-F F-5~F-8 (TICKET-654, PRD-051/AC-2) — 정본 screens/T0F-홈묶음보스일정부품.html · p2-BossSchedule.html
   board-tokens.css(:root 변수)만 의존한다. 색·크기·간격은 토큰만 — 직접 값 0. 묶음 박스는 board-comp-home.css(.board-home-bundle)를 같이 불러 쓴다. */

/* F-5 팝업 헤더 — 위에 겹쳐 놓는다(내용이 밑으로 흐려지며 사라짐). 쓰는 화면이 position: relative 칸 안에 둔다 */
.board-bs-head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; gap: 2px;
  height: var(--board-bs-head-h); padding: var(--board-bs-head-pad); box-sizing: border-box; pointer-events: none;
  background: linear-gradient(to bottom, var(--board-bs-head-bg) 0%, var(--board-bs-head-bg) var(--board-bs-head-solid-to), var(--board-bs-head-clear) 100%);
  font-family: var(--board-font-body); color: var(--board-text);
}
.board-bs-head__row { display: flex; align-items: center; width: 100%; height: var(--board-bs-head-row-h); pointer-events: auto; }
.board-bs-head__title { padding-left: var(--board-bs-head-title-pad); font-size: var(--board-font-size-18); font-weight: 800; }
.board-bs-head__close {
  margin-left: auto; width: var(--board-bs-head-row-h); height: var(--board-bs-head-row-h); border: none; background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--board-text-dim);
}
body.board-body a.board-bs-head__close, body.board-body a.board-bs-head__close:hover { color: var(--board-text-dim); }
.board-bs-head__close:focus-visible { outline: 2px solid var(--board-accent); outline-offset: -2px; }
.board-bs-head__icon { width: var(--board-bs-head-close-icon); height: var(--board-bs-head-close-icon); }

/* F-6 보스 일정 줄 — 상자 · 이미지 52 · 이름 줄 · 기간 · (오늘) 빠른 참여 */
.board-bs-row {
  display: flex; align-items: center; gap: var(--board-bs-row-gap); margin-top: var(--board-bs-row-top);
  background: var(--board-surface); border: 1px solid var(--board-surface-border); border-radius: var(--board-radius-14); padding: var(--board-bs-row-pad);
  font-family: var(--board-font-body); color: var(--board-text);
}
.board-bs-row__body { flex: 1; min-width: 0; }
.board-bs-row__line { display: flex; align-items: center; gap: var(--board-bs-name-gap); }
.board-bs-row__name { font-size: var(--board-font-size-16); font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 긴 이름은 이름만 말줄임(TICKET-682, 사용자 결정 10-11) — 태그·성급은 아래에서 줄어들지 않는다 */
.board-bs-row__when { display: block; margin-top: var(--board-bs-when-top); font-family: var(--board-font-mono); font-size: var(--board-font-size-12); white-space: nowrap; color: var(--board-text-dim); }
.board-bs-row__regional { color: var(--board-text-dim); display: inline-block; white-space: pre; }  /* 지역 한정 보스 기간 옆 글자 — 정본 #A7B0C8, 예정 줄(주황 기간)에서도 회색 */
/* 칸이 좁아 기간 + 지역 글자가 한 줄에 안 들어가면 지역 글자 조각만 둘째 줄로(TICKET-711 재작업, PL 결정 10-12) — 기간은 한 줄 유지, 지역 글자는 자르지 않는다. 예정 줄·오늘 줄 공통. 마크업은 정본 그대로 */
.board-bs-row__when:has(.board-bs-row__regional) { white-space: normal; }
.board-bs-row--next .board-bs-row__when { color: var(--board-time); }
.board-bs-row__join {
  font-size: var(--board-font-size-12); font-weight: 800; color: var(--board-accent-ink); background: var(--board-accent); border-radius: var(--board-radius-8);
  padding: var(--board-home-join-pad); white-space: nowrap; border: 0; font-family: var(--board-font-body); cursor: pointer; text-decoration: none;
}
body.board-body a.board-bs-row__join, body.board-body a.board-bs-row__join:hover { color: var(--board-accent-ink); }
/* 테두리 버튼 [만들기](정본 7853) — 열린 방이 없는 오늘 줄. 채운 버튼과 높이가 같게 안쪽 여백에서 테두리 1을 뺀다 */
.board-bs-row__join--outline { box-sizing: border-box; min-width: var(--board-bs-join-min-w); text-align: center; color: var(--board-accent); background: transparent; border: 1px solid var(--board-accent); padding: var(--board-bs-join-outline-pad); }
body.board-body a.board-bs-row__join--outline, body.board-body a.board-bs-row__join--outline:hover { color: var(--board-accent); }
.board-bs-row__join--locked, .board-bs-row__join--locked:disabled { background: var(--board-btn-secondary-bg); color: var(--board-footer-text); cursor: default; } /* 비활성(진행 중인 내 레이드, 계약 §39-3) — 홈 [레이드 만들기] 잠금(.board-btn-locked)과 같은 토큰 */
.board-bs-row__join:active { opacity: var(--board-press-dim); }
.board-bs-row__join:focus-visible { outline: 2px solid var(--board-text); outline-offset: 2px; }

/* F-10 캘린더 추가 버튼(TICKET-710, PRD-051/AC-16) — 예정 줄 오른쪽 끝. 40×40 · 누름 영역 44 · 모서리 10 · 테두리 1 · 바탕 투명 · 아이콘 20/선 1.8 accent · 글자 없음.
   누름: 테두리 accent + 바탕 accent 10%. 누름 영역 44는 ::after로 4 넓힌다(줄 안 다른 요소를 밀지 않는다) */
.board-bs-cal {
  position: relative; flex-shrink: 0; box-sizing: border-box; width: var(--board-bs-cal-btn); height: var(--board-bs-cal-btn);
  border: var(--board-bs-cal-border) solid var(--board-surface-border); border-radius: var(--board-bs-cal-radius); background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--board-accent); text-decoration: none; cursor: pointer;
}
.board-bs-cal::after { content: ""; position: absolute; inset: calc((var(--board-bs-cal-btn) - var(--board-bs-cal-hit)) / 2 - var(--board-bs-cal-border)); }  /* 절대 위치 기준은 테두리 안쪽(padding box)이라 테두리 두께만큼 더 뺀다 */
.board-bs-cal__icon { width: var(--board-bs-cal-icon); height: var(--board-bs-cal-icon); stroke: currentColor; }
.board-bs-cal:active, .board-bs-cal--pressed { border-color: var(--board-accent); background: var(--board-accent-tint); }
.board-bs-cal:focus-visible { outline: 2px solid var(--board-text); outline-offset: 2px; }

/* 종류 태그 — 10/800 · 배경 흰 6% · 4색은 board-tokens.css(--board-kind-*). 홈 보스 일정 줄은 쓰지 않고(이미지 위 마크, 사용자 결정 10-11) 운영자 보스 묶음이 쓴다 */
.board-kind-tag { flex-shrink: 0; white-space: nowrap; font-size: var(--board-font-size-10); font-weight: 800; background: var(--board-kind-tag-bg); border-radius: var(--board-kind-tag-radius); padding: var(--board-kind-tag-pad); }
.board-kind-tag--dynamax { color: var(--board-kind-dynamax); }
.board-kind-tag--gigantamax { color: var(--board-kind-gigantamax); }
.board-kind-tag--mega { color: var(--board-kind-mega); }
.board-kind-tag--shadow { color: var(--board-kind-shadow); }

/* F-7 성급 ×N — 아이콘 14×12(투명 .85) + ×N Chakra 12/700 */
.board-bs-tier { flex-shrink: 0; white-space: nowrap; display: inline-flex; gap: var(--board-bs-tier-gap); align-items: center; height: var(--board-bs-tier-h); }
.board-bs-tier__icon { width: var(--board-bs-tier-icon-w); height: var(--board-bs-tier-icon-h); object-fit: contain; opacity: var(--board-bs-tier-icon-opacity); }
.board-bs-tier__n { font-family: var(--board-font-mono); font-size: var(--board-font-size-12); font-weight: 700; color: var(--board-text-soft); }

/* F-8 날짜 묶음 머리 — 날짜 15/800 + 보조 12 faint(왼 8) · 기준선 맞춤 */
.board-bs-day { display: flex; align-items: baseline; gap: var(--board-bs-day-gap); }
.board-bs-day__date { font-size: var(--board-font-size-15); font-weight: 800; color: var(--board-text); }
.board-bs-day__sub { font-size: var(--board-font-size-12); color: var(--board-text-faint); }

/* 팝업 모양 틀(F-5 헤더가 내용 위로 겹치는 칸) + 견본 전용 줄 — 팝업 화면(AC-7)과 /dev/components/home 견본이 쓴다 */
.board-bs-popup { position: relative; background: var(--board-home-scroll-bg); }
.board-bs-popup__top { height: var(--board-bs-popup-top); }
.board-bs-sample-row { display: flex; align-items: center; }
.board-bs-sample-row--tiers { gap: var(--board-bs-sample-tier-gap); }
.board-bs-sample-row--tags { gap: var(--board-bs-sample-tag-gap); margin-top: var(--board-bs-sample-tag-top); }
/* 팝업 화면(AC-7) — 헤더는 정본처럼 스크롤해도 위에 붙어 내용 위로 겹친다(자기 높이만큼 음수 여백으로 흐름에서 빼고 sticky) */
.board-bs-popup .board-bs-head { position: sticky; top: 0; margin-bottom: calc(-1 * var(--board-bs-head-h)); flex-shrink: 0; }

/* 보스 일정 페이지 머리 묶음(TICKET-727, PRD-051/AC-19) — 정본 p2-BossSchedule: ‹ 버튼만 있는 첫 줄 + h1 + 한 줄 설명. 탑바 변형 아님. 값은 토큰만 */
.board-bs-intro { padding: var(--board-bs-intro-pad); }
.board-bs-intro__back { display: flex; align-items: center; height: var(--board-back-btn); }
.board-bs-intro__title { margin: var(--board-bs-intro-title-margin); font-family: var(--board-font-display); font-weight: 400; font-size: var(--board-bs-intro-title-size); line-height: 1.25; }
.board-bs-intro__lead { margin: var(--board-bs-intro-lead-margin); font-size: var(--board-font-size-13); line-height: 1.5; color: var(--board-text-faint); }