/*
 * 게시판 최소 버전 전용 CSS (TICKET-264, 계약 doc/reports/TICKET-263/board-contract.md)
 *
 * doc/design/board/screens/*.html 각 화면 <head><style>에 반복되는 공통
 * 블록을 그대로 옮기되, 색 값만 board-tokens.css 변수로 치환했다(레이드
 * tokens.css에 기대지 않는다 — 색은 board-tokens.css, 글꼴은 이 파일에서 닫힌다).
 * 클래스 이름(.pg/.top/.h/.btn.p/.btn.x 등)과 값은 screens/*.html과 1:1
 * 대응한다 — 새 이름을 짓지 않았다.
 *
 * 화면 밖 차이 한 가지: 정본은 디자인 캔버스 크기(390×664, 고정
 * overflow:hidden)를 쓰지만 실제 모바일 웹은 기기 폭이 다양하므로 `.pg`를
 * `width:100%;max-width:480px`(레이드 화면과 같은 상한, style.css 참고)
 * 유동 레이아웃으로 바꿨다 — 모양(색·글꼴·간격·배치)은 그대로, 캔버스
 * 자체만 반응형으로 편 것이다. 상세는 티켓 보고서 "스펙과 디자인이 다른 곳".
 *
 * TICKET-287(PRD-016 AC-1, v2 디자인) 추가분은 파일 끝 "게시판 v2 공통
 * 부품" 절 — 화면 코드가 옛 B계열에서 G(공통)·J(참여자)·O(주최자)로
 * 바뀌었다(계약 contracts/board.md §0 표). 위 옛 주석들의 B코드는 코드
 * 흐름 설명이라 남겨두고 괄호로 새 코드를 덧붙였다.
 */

/* [hidden] 특이도 버그 수정(TICKET-266, QA 반려 doc/reports/TICKET-263/1610-qa-staging.md §1)
   — `.bot{display:flex}` 등 board 전용 author 규칙이 브라우저 기본값
   `[hidden]{display:none}`과 특이도가 같아(둘 다 클래스/속성 선택자 1개) 뒤에
   나온 규칙이 카스케이드 순서로 이겨버렸다. 그 결과 "마감하기"+"마감됐어요",
   "참여하기"+"마감된 모집이에요" 같은 상호 배타 버튼 쌍이 동시에 노출됐다
   (흐름 1·5·9 실패 원인). 속성 선택자를 그대로 쓰되 !important로 항상 이기게
   한다 — board.css 안에서만 적용(다른 화면 영향 없음). */
[hidden] {
  display: none !important;
}

/* "앱처럼" 공통 항목(TICKET-268, PL 지시 — 레이드 style.css TICKET-249
   app-feel 블록과 같은 값이지만, board.css는 레이드 style.css/tokens.css에
   의존하지 않는 분리 원칙(위 파일 머리말, board-contract.md)이 이미 있어
   그 값만 여기 로컬로 다시 둔다. 링크로 불러오는 대신 로컬에 둔 이유는
   보고서 참고). 더블탭 확대 방지는 `.btn`(위 규칙에 이미 있는 클래스들
   전부) touch-action, 두 손가락 핀치 확대는 건드리지 않는다(AC-62와 같은
   원칙 — base.html viewport meta에 user-scalable 없음). */
html {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body.board-body {
  /* 가운데 기둥(T1 13, TICKET-644) — 폭·바깥 배경·그림자는 board-pillar.css 한 곳. 좌우 auto만 여기서 지켜 준다. */
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--board-bg);
  font-family: 'Gothic A1', sans-serif;
  color: var(--board-text);
  overscroll-behavior: none;
  /* 길게 누름 시 브라우저 기본 선택 팝업 방지 — 예외(선택 가능)는
     `.code`(트레이너 코드·링크 주소, 이미 아래에 있던 규칙)와 input/textarea. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.board-body a { color: var(--board-link); }
body.board-body a:hover { color: var(--board-link-hover); }
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* 줄 단위 복사 버튼(`.board-copy-row`)은 제외 — 줄 전체가 줄면 라벨이 밀린다(TICKET-380 재작업).
   눌림 효과는 그 줄의 값·아이콘에만 준다(아래 `.board-copy-row` 블록). */
button:not(.board-copy-row):not(.board-tile):active:not(:disabled):not([aria-disabled="true"]),
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(.97);
}

.pg {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* 페이지 전체 스크롤(TICKET-354, PRD-020/AC-1 R1) — 높이를 고정하지 않고
     최소 높이만 뷰포트로 둔다. 본문이 길면 문서 전체가 자라 스크롤하고, 짧으면
     `.in{flex:1}`이 남는 공간을 채워 `.bot`이 화면 아래에 붙는다. 옛 TICKET-268은
     `height`로 고정하고 참여 기록만 내부 스크롤했으나 PRD-020이 뒤집었다. */
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  background: var(--board-bg);
  color: var(--board-text);
  font-family: 'Gothic A1', sans-serif;
  display: flex;
  flex-direction: column;
}
.top {
  min-height: 52px;
  padding: 0 24px;
  padding-top: env(safe-area-inset-top, 0px); /* 노치 보정(T1 규칙 10) — min-height라 내용이 안 눌린다 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  /* 상단 고정(T1 규칙 10, TICKET-572 0-2 — 옛 "스크롤과 함께 올라간다"를 대체) — fixed가 아니라 sticky라
     본문 padding 보정이 필요 없다. 불투명 배경 필수(반투명·blur 금지, 지나가는 카드가 비쳐 보이면 안 된다).
     z-index는 하단 고정 영역(5)보다 아래, 바텀시트(40/41)·다이얼로그(10)·토스트(60)보다 낮게 둬서
     "바텀시트·다이얼로그·토스트가 헤더보다 위" 규칙을 지킨다. */
  position: sticky;
  top: 0;
  z-index: 3;
  box-sizing: border-box;
  background: var(--board-header-bg);
  border-bottom: 1px solid var(--board-header-line);
  /* 헤더 아래 여백(TICKET-574 1-4) — 정본 전 화면(canon-2026-10-08-canvas) 공통 `.top{margin-bottom:14px}`
     실측. 이 값이 없으면 본문 첫 요소(카드 margin-top:6 등)만으로 헤더 테두리에 바짝 붙는다. 공용 헤더
     컴포넌트(`board/components/header.html`)라 모든 화면이 같이 바뀐다 — 의도대로(부품에서 고치기). */
  margin-bottom: 14px;
}
/* 헤더 아래 선 밑 페이드(TICKET-581, T1 규칙 10 보강) — 새 DOM 엘리먼트 없이 `.top::after`로,
   선(1px, 위 border-bottom)은 그대로 두고 그 바로 아래 16px를 header-bg(불투명) → 투명 그라데이션.
   absolute 자식의 top:100%는 부모의 패딩 박스(border 제외) 기준이라 border-bottom보다 위에서
   시작해 선을 덮는다(TICKET-583). calc(100% + 1px)로 border-bottom 두께(1px)만큼 더 밀어서
   선 바로 아래부터 페이드가 시작하게 한다. sticky 헤더를 따라 같이 움직이도록 헤더 자신의
   ::after로 둔다(별도 fixed 레이어 아님). 클릭 통과를 위해 pointer-events none. */
.top::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: calc(100% + 1px);
  height: var(--board-header-fade-h);
  background: linear-gradient(to bottom, var(--board-header-bg), var(--board-header-bg-clear));
  pointer-events: none;
}
/* 헤더 로고(TICKET-569, T0-C 5-1 헤더 견본) — 마크 28 + POKE·TEAM Chakra Petch 700 18px 자간 2, 마크와 간격 8. 누르면 홈 링크지만 링크색이 아니다. */
.brand-mark { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.brand-mark__box { fill: var(--board-surface); }
.brand-mark__ring { stroke: var(--board-divider); }
.brand-mark__arc { stroke: var(--board-accent); }
.brand-mark__dot { fill: var(--board-team-yellow); }
.brand-mark__word { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 2px; }
.brand-mark__poke { color: var(--board-text); }
.brand-mark__team { color: var(--board-accent); }
.me { font-size: 13px; font-weight: 700; color: var(--board-text-dim); text-decoration: none; }
/* 공통 헤더 탭(T0-D D-1, TICKET-625) — 로고 마크 + [레이드][친구 찾기] + 프로필 칩(오른쪽 끝). 큰 제목 없음.
   탭 14/800, 선택 탭은 흰 글자 + 아래 하늘 밑줄 2(헤더 아래 선을 덮는다). */
.top--tabs { justify-content: flex-start; gap: var(--board-top-tabs-gap); }
.top--tabs .me { margin-left: auto; }
.top-tab { position: relative; align-self: stretch; display: flex; align-items: center; white-space: nowrap; font-size: 14px; font-weight: 800; color: var(--board-text-faint); text-decoration: none; }
/* `body.board-body a`(링크색)보다 세게 — 탭은 링크색이 아니다. */
body.board-body a.top-tab, body.board-body a.top-tab:hover { color: var(--board-text-faint); }
body.board-body a.top-tab.is-on, body.board-body a.top-tab.is-on:hover { color: var(--board-text); }
.top-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--board-accent); }
/* `body.board-body a`(링크색)보다 세게 — 헤더 "로그인"은 정본 .me 색(text-dim) 그대로(U5). */
body.board-body a.me:not(.board-nickname-chip),
body.board-body a.me:not(.board-nickname-chip):hover { color: var(--board-text-dim); }
/* 비로그인 홈 헤더 "로그인"은 정본 QJLogin1 — 강조색·weight 800(TICKET-504). 다른 화면 "로그인"은 위 text-dim 그대로. */
body.board-body a.me.me--login,
body.board-body a.me.me--login:hover { color: var(--board-accent); font-weight: 800; }
.in {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.h { font-family: 'Black Han Sans', sans-serif; font-size: 28px; line-height: 1.25; margin: 0; }
.btn {
  height: var(--board-btn-h);
  border: none;
  border-radius: 16px;
  font-family: 'Gothic A1', sans-serif;
  font-size: 17px;
  font-weight: 800;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation; /* 더블탭 확대 방지, 핀치 확대는 그대로(TICKET-268) */
}
.btn.p { background: var(--board-accent); color: var(--board-accent-ink); }
.btn.x { background: var(--board-btn-secondary-bg); color: var(--board-text-faint); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn:disabled { cursor: not-allowed; } /* TICKET-336 — 정본 G2 `.btn.x[disabled]`는 opacity 없이 `.x` 색(secondary-bg/text-faint) 그대로 */
/* TICKET-599 — 인라인 style을 옮긴 변형 클래스(값 불변) */
.btn--link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.x--bright { color: var(--board-text); }
.btn--outline { background: transparent; border: 1px solid var(--board-surface-border); color: var(--board-text-dim); }
.bot {
  /* 하단 고정 영역(TICKET-354, PRD-020/AC-1 R3·R4) — 페이지 전체 스크롤 안에서
     화면 아래에 sticky로 붙는다. 바탕 bg, 위 40px 페이드(::before, 투명 → bg),
     윗선·그림자 없음, 하단 safe-area 여백 포함. canvas-v2 `.bot` 구조와 같다. */
  position: sticky;
  bottom: 0;
  z-index: 5; /* 본문 위, 토스트·다이얼로그·바텀시트(z 10 이상) 아래 */
  background: var(--board-bg);
  flex-shrink: 0;
  /* 하단 안전영역(TICKET-268, 노치·제스처바 겹침 방지) — style.css
     `.status-bar-pinned`류와 같은 관례(padding + env(), 폴백은 16px 그대로). */
  padding: 12px 24px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 하단 고정 영역 위 40px 페이드(TICKET-354, R4) — 마크업 없이 모든 `.bot`이 갖는다. */
.bot::before {
  content: '';
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--board-fade-h)); height: var(--board-fade-h);
  background: linear-gradient(to bottom, var(--board-bg-clear), var(--board-bg));
  pointer-events: none;
}
/* 참여 기록 래퍼(TICKET-354, PRD-020 R1) — 내부 스크롤 없이 남는 높이만 채운다
   (마크업은 `post.html` `log_section()` 매크로가 이 클래스로 감싼다). */
.board-log-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.field {
  background: var(--board-surface);
  border: 1px solid var(--board-surface-border);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--board-text-faint);
  width: 100%;
  box-sizing: border-box;
  font-family: 'Gothic A1', sans-serif;
}
.field::placeholder { color: var(--board-text-faint); }
.field.has-value { color: var(--board-text); }
.lbl { font-size: 13px; color: var(--board-text-dim); margin-bottom: 8px; }
/* 참여 기록 톤다운(TICKET-287, PRD-016 AC-1) — 회색 13px, 최신이 위(서버
   정렬 그대로, presenters.py::build_log). 옛 값(14px, join/create를 JS가
   인라인으로 흰 글자 처리)을 대체 — `board-common.js::renderLog`가 이제
   인라인 색 대신 `.cm--cancel` 클래스만 붙인다. */
.cm {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border-bottom: 1px solid var(--board-divider);
  font-size: 13px;
  color: var(--board-text-dim);
}
/* 취소 줄(TICKET-309, PRD-017 AC-11) — 팀 점은 원래 팀 색 그대로, 점·글자·시각을
   줄 전체 알파 하나로 한 덩어리로 낮춘다. 글자색을 따로 바꾸지 않는다. */
.cm--cancel { opacity: var(--board-log-cancel-alpha); }
/* 마감 줄은 기존 모양 유지(TICKET-300) — 취소와 클래스를 분리했다. */
.cm--close { color: var(--board-log-cancel); opacity: .6; }
.cm .tm { margin-left: auto; font-size: 12px; color: var(--board-text-faint); }
.code { -webkit-user-select: text; user-select: text; }

/* G2 레이드 만들기 설정 박스(TICKET-322, PRD-018/AC-8) — `screens/G2-레이드만들기.html`의
   인라인 스타일을 값 그대로 클래스로 옮기고 색만 토큰 변수로 치환했다. 정본 `.row`는
   min-height 56px이라 g2- 접두사로 둔다. */
.g2-card { margin-top: 12px; background: var(--board-surface); border-radius: 18px; padding: 2px 16px; }
.g2-boss {
  display: flex; align-items: center; gap: 14px; padding: 14px 0; width: 100%;
  border: none; border-bottom: 1px solid var(--board-divider); background: transparent;
  color: var(--board-text); font-family: 'Gothic A1', sans-serif; text-align: left; cursor: pointer;
}
.g2-boss__thumb {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 60px; height: 60px; box-sizing: border-box; border-radius: 50%;
  background: transparent; border: 1.5px dashed var(--board-seat-empty); color: var(--board-text-dim);
}
/* 보스 줄 두 줄 + 화살표(A3, 10-08 결정) — 위 "보스 선택"(작게), 아래 보스 이름 자리(크게, 기존 `#board-boss-name` 그대로) */
.g2-boss__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* T0C "보스 선택" 줄 — 라벨(크게)·부제(작게) 크기가 뒤바뀌어 있던 것을 정정(TICKET-572 처리목록, p2-WriteFinalMain.dc.html). */
.g2-boss__title { font-family: 'Black Han Sans', sans-serif; font-size: 20px; color: var(--board-text-dim); }
.g2-boss__name { font-size: 13px; font-weight: 400; color: var(--board-text-faint); }
.g2-boss__chevron { color: var(--board-text-faint); font-size: 20px; flex-shrink: 0; }
.g2-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; border-bottom: 1px solid var(--board-divider);
}
.g2-row--last { border-bottom: none; }
.g2-row__title { font-size: 15px; }
.g2-combo { position: relative; display: inline-block; width: 116px; }
.g2-combo__btn {
  height: 44px; width: 100%; box-sizing: border-box; padding: 0 10px 0 12px;
  border: 1px solid var(--board-surface-border); border-radius: 12px; background: transparent;
  color: var(--board-text); font-family: 'Gothic A1', sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.g2-stp { display: flex; align-items: center; gap: 6px; }
.g2-stp button {
  width: 44px; height: 44px; border: 1px solid var(--board-surface-border); border-radius: 12px;
  background: transparent; color: var(--board-text); font-size: 20px; cursor: pointer; touch-action: manipulation;
}
.g2-stp button:disabled { opacity: .35; cursor: not-allowed; }
.g2-stp__num { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; width: 28px; text-align: center; }
.g2-stp__num.is-empty { color: var(--board-seat-empty); }
.g2-help {
  width: 28px; height: 28px; border: none; background: transparent; color: var(--board-text-faint);
  padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.g2-tg {
  flex-shrink: 0; width: 48px; height: 28px; border-radius: 14px; position: relative; display: inline-block;
  background: var(--board-btn-secondary-bg);
}
.g2-tg span { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--board-text-faint); }
.g2-tg.is-on { background: var(--board-accent); }
.g2-tg.is-on span { left: auto; right: 3px; background: var(--board-bg); }
.g2-visually-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; }

.board-log-label { font-size: 12px; color: var(--board-text-faint); margin-top: 22px; margin-bottom: 2px; }
.board-hint { font-size: 12px; line-height: 1.55; color: var(--board-text-faint); padding: 10px 0 0; word-break: keep-all; }
.board-hint--error { color: var(--board-error-text); }
.g2-pointer { cursor: pointer; }
.field.g2-title-field { margin-top: 14px; }
.board-closed-note { font-size: 14px; color: var(--board-text-faint); text-align: center; padding: 14px 0; }

/* G4(구 B3-M) 마감 화면 */
.board-center { justify-content: center; align-items: center; text-align: center; }

.board-footer-note { text-align: center; font-size: 11px; color: var(--board-footer-text); margin-top: 8px; }
/* G1 하단 약관 링크(TICKET-338) — 정본 G1-홈.html은 링크 없는 일반 텍스트(footer-text 색)라
   링크도 주변 글자와 같은 색·밑줄 없음. 공용 `a` 규칙은 건드리지 않고 이 줄 안에만 적용. */
/* `body.board-body a`(특이도 0,1,2)를 이기려면 같은 접두가 필요하다. */
body.board-body .board-footer-note a,
body.board-body .board-footer-note a:hover { color: inherit; text-decoration: none; }

/* 하단 고지 한 줄(TICKET-426→505, T0 "저작권 고지") — 색 #4A5578(footer-text)·가운데 정렬·11px. */
/* 나머지 화면: 본문 `.in` 맨 끝 한 줄. `.board-in-notice`가 본문 최소 높이를 화면 높이(하단 고정 영역
   제외 — 영역은 흐름 안에서 본문 아래라 자기 높이만큼 더 스크롤된다)로 잡아 첫 화면에 고지가 안 보이고
   한 번 스크롤해야 보인다. 스크롤 끝에서 고지 줄은 하단 고정 영역 바로 위(아래 여백 24)라 버튼에 안 가린다.
   정본 화면의 `margin-top:640px`(390×664 고정 그림용)은 옮기지 않는다. */
.board-in-notice { min-height: 100vh; min-height: 100dvh; }
.board-info-notice { margin-top: auto; padding: 24px 0; flex-shrink: 0; text-align: center; font-size: 11px; color: var(--board-footer-text); text-decoration: none; }
.board-info-notice--dock { margin-top: 8px; padding: 0; }
.board-info-notice span { text-decoration: underline; text-underline-offset: 3px; }
body.board-body a.board-info-notice,
body.board-body a.board-info-notice:hover { color: var(--board-footer-text); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════
 * 게시판 v2 공통 부품 (TICKET-287, PRD-016 AC-1 — 1차 커밋 + PL 보완 지시로
 * 레이아웃까지 확장)
 * 값은 디자인 정본 doc/design/board/screens/T0-스타일정본.html "COLOR"·
 * "COMPONENTS" 절 + J1/J3/O1 각 화면의 카드 div를 그대로 옮겼다(헌장
 * §9 — 마크업·CSS 그대로, 값만 토큰 변수로 치환). `.board-nickname-chip`
 * (헤더)·`.board-post-card`(모집 카드, J1/J3/O1 공통)는 이 화면들에
 * 실제로 붙었다 — `.board-banner`는 타이머·안내 배너에 쓴다.
 * ══════════════════════════════════════════════════════════════════════ */

/* 헤더 닉네임 칩 — 팀 점 + 닉네임, 더 이상 `[닉네임]` 대괄호가 아니다
   (AC-1). 비로그인은 칩 없이 "로그인" 텍스트 그대로(`.me` 기존 규칙). */
/* `body.board-body a`(링크색, 0,1,2)에 색이 덮이지 않도록 같은 접두를 붙인다(TICKET-364 D1). */
body.board-body .board-nickname-chip,
body.board-body a.board-nickname-chip:hover { color: var(--board-text-dim); }
.board-nickname-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--board-text-dim);
  background: var(--board-divider);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
  text-decoration: none;
}
/* 프로필 말풍선(TICKET-362, PRD-020/AC-14) — 값은 canvas-v2 PostProfilePop.dc.html 그대로, 색만 토큰.
   .top 기준 절대 위치(칩 아래 6px 삼각 꼭지), 하단 영역(z 5)·다이얼로그(z 10)보다 위(z 20, PL 결정). 조회 전용.
   `.top`은 이미 `position: sticky`(위 정의)라 절대 위치 자식의 기준이 되므로 여기서 다시 `relative`로
   덮어쓰지 않는다(TICKET-572 0-2 — 예전엔 이 규칙이 sticky보다 아래라 덮어썼다). */
.board-nickname-chip.is-open { box-shadow: 0 0 0 1px var(--board-accent); }
.board-profile-pop {
  position: absolute; top: 46px; right: 20px; width: 224px; box-sizing: border-box;
  background: var(--board-pop-bg); border-radius: 12px; padding: 12px 14px; z-index: 20;
  display: flex; flex-direction: column; gap: 12px;
}
.board-profile-pop[hidden] { display: none; }
.board-profile-pop__arrow {
  position: absolute; top: -6px; right: 28px; width: 12px; height: 12px;
  background: var(--board-pop-bg); transform: rotate(45deg);
}
.board-profile-pop__label { font-size: 12px; color: var(--board-text-dim); }
.board-profile-pop__value {
  display: flex; align-items: center; min-height: 24px; margin-top: 4px;
  color: var(--board-text);
}
.board-profile-pop__name { font-size: 15px; font-weight: 800; }
.board-profile-pop__code {
  justify-content: space-between; width: 100%; padding: 0; border: none; background: transparent;
  cursor: pointer; font: inherit; text-align: left;
}
.board-profile-pop__code > span { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.board-profile-pop__code svg { color: var(--board-accent); flex-shrink: 0; }
.board-profile-pop__empty { font-size: 12px; color: var(--board-text-dim); }
.board-profile-pop__team { gap: 6px; font-size: 12px; font-weight: 700; color: var(--board-text-dim); }
.board-profile-pop__rule { height: 1px; background: var(--board-pop-divider); }
/* 팀 링 — 14px, 2px 테두리(팀 점 색과 같은 값) + 말풍선 바탕 채움 */
.board-team-ring {
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0;
  border: 2px solid var(--board-team-none); background: var(--board-pop-bg);
}
.board-team-ring--blue { border-color: var(--board-team-blue); }
.board-team-ring--red { border-color: var(--board-team-red); }
.board-team-ring--yellow { border-color: var(--board-team-yellow); }
.board-team-ring--none { border-color: var(--board-team-none); }
.board-team-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--board-team-none);
}
.board-team-dot--blue { background: var(--board-team-blue); }
.board-team-dot--red { background: var(--board-team-red); }
.board-team-dot--yellow { background: var(--board-team-yellow); }
.board-team-dot--none { background: var(--board-team-none); }

/* 모집 카드(TICKET-287 보완, PRD-016 AC-1) — J1·J3·O1 공통. 값은 디자인
   정본 doc/design/board/screens/J1-참여전.html의 카드 div를 그대로 옮겼다
   (마진·패딩·간격 숫자 전부 동일, 색만 위 토큰 변수로 치환). 칩·개설
   시각·제목·팀 점+주최자·좌석 원+인원수까지가 이 카드의 범위다 — 트레이너
   코드/링크 복사·참여 취소 버튼·대기 버튼 등 화면별 기능은 카드 밖(기존
   `.bot`)에 그대로 남아 있다. */
/* T0C 4-1(TICKET-572 처리목록 재구성) — 카드 자체는 틀만(모서리·배경·그림자), 안쪽 두 구역
   (`__boss-block`=위 배경 보스 그림 구역, `__tray`=아래 띠)이 각자 패딩을 가진다. */
.board-post-card {
  margin-top: 6px;
  background: var(--board-card-bg);
  border: 1px solid var(--board-surface-border);
  border-radius: var(--board-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 좌석 원 경계 링 색(TICKET-298, PL 추가 지시) — 겹친 원끼리 카드
     배경색 링으로 분리한다. 카드 변형(정원 참 등, 아래 `--full`)마다
     배경이 다르므로 이 변수로 스코프를 나눈다 — `.board-seat`가 상속해
     쓴다. */
  --board-seat-ring: var(--board-card-bg);
  position: relative; /* 더보기 메뉴(주최자 카드) 기준 */
  /* z-index:1(TICKET-574 1-1) — 정본 p2-PostHost(canon-2026-10-08-canvas) 실측: 이 카드 본문이 z-index:1,
     링크 카드(`__link-card`)가 z-index:0이라 링크 카드의 margin-top:-22 겹침이 카드 쪽 위로 그려져
     좌석 원을 가리지 않는다. 이 값이 없으면(auto=0, 링크 카드와 동률) DOM 순서상 뒤에 그려지는 링크
     카드가 위로 올라와 좌석 원 아래쪽을 덮는다(실측: 5px, 헌장 §9 T0 우선). */
  z-index: 1;
}
.board-post-card-wrap { position: relative; isolation: isolate; }
.board-post-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.board-post-card__chips { display: flex; gap: 6px; }
.board-post-card__time { font-size: 12px; color: var(--board-text-faint); white-space: nowrap; }
/* 개설 시각 + 제목(PRD-027/AC-1) — 시각이 제목 바로 위, 간격 4 */
.board-post-card__head { display: flex; flex-direction: column; gap: 4px; }
.board-post-card__title {
  flex: 1; min-width: 0;
  font-family: 'Black Han Sans', sans-serif;
  font-size: 24px;
  line-height: 1.25;
}
.board-post-card__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.board-post-card__label { width: 44px; flex-shrink: 0; font-size: 13px; color: var(--board-text-dim); }
/* 아래 띠(T0C 4-1 "아래 띠") — 바탕 그라디언트 + 두 줄(👑 주최자 / 좌석 원) + 오른쪽 큰 인원.
   "주최자"·"참여자" 라벨은 없다. 👑는 테두리 없는 민 이모지(옛 파란 링은 뺐다). */
.board-post-card__tray {
  background: radial-gradient(ellipse 120% 160% at 100% 100%, var(--board-tray-glow-start) 0%, var(--board-tray-glow-end) 60%);
  border-top: 1px solid var(--board-divider);
  padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.board-post-card__tray-row { display: flex; align-items: center; gap: 12px; }
.board-post-card__tray-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.board-post-card__crown { display: block; font-size: 15px; line-height: 22px; flex-shrink: 0; }
.board-post-card__host-nick {
  font-size: 16px; font-weight: 800; line-height: 22px; color: var(--board-text);
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* 주소 전체 표시(TICKET-574 1-1) — 말줄임 없이 끝까지 보인다(필요하면 줄바꿈). 공간이 부족해도 글자가
   잘리지 않는 쪽이 "말줄임 제거·전체 표시" 요구에 맞는다. */
.board-post-card__link {
  font-family: var(--board-font-mono); font-size: 15px; font-weight: 700; color: var(--board-accent); flex: 1;
  min-width: 0; word-break: break-all;
}
.board-post-card__count {
  flex-shrink: 0;
  font-family: var(--board-font-mono);
  font-weight: 700;
  font-size: var(--board-tray-count-size);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--board-text);
}
.board-post-card__count small { color: var(--board-text-faint); font-size: 20px; letter-spacing: 0; margin-left: 5px; font-weight: 700; }
/* 주최자 링크 카드(T0C 4-1 "주최자 화면") — 카드 밖으로 -22px 겹쳐 나온 별도 카드. 테두리·글로우 없음. */
.board-post-card__link-card {
  position: relative; z-index: 0; margin-top: -22px; padding: 32px 18px 12px;
  background: var(--board-divider); border-radius: 0 0 18px 18px;
  display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%;
  border: none; text-align: left; box-sizing: border-box;
}


/* 상태 칩 4종 — 모집 중(하늘색)·정원 참·연장됨(앰버, 공용 톤)·마감(회색)·
   패스 세이브(코랄). 모집 카드 왼쪽 위(AC-1 "칩·개설 시각·제목·..." 순서)
   에 쓴다. */
.board-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}
.board-chip--open { color: var(--board-accent); background: var(--board-open-bg); }
.board-chip--time { color: var(--board-time); background: var(--board-time-bg); }
.board-chip--closed { color: var(--board-text-dim); background: var(--board-divider); }
.board-chip--depart { color: var(--board-time); background: var(--board-depart-chip-bg); }
.board-chip--country { color: var(--board-country); background: var(--board-country-bg); }  /* 나라 칩(T0A 2-1, 하늘) */
.board-chip--country[hidden] { display: none; }  /* board-tz.js가 보는 사람 시간대와 다를 때만 `hidden`을 푼다(계약 §28-8) */
.board-chip--rule { color: var(--board-rule); background: var(--board-rule-bg); }

/* 좌석 원(PRD-022/AC-2, 캔버스 SeatLetter3·10·7of10) — 링 안에 트레이너명 첫 글자(initial).
   나(is_me)는 28px·팀색 100%·글자 하늘색, 다른 사람은 22px·팀색 40%·글자 회청색.
   안쪽은 카드색이라 겹치면 앞(위) 원이 뒤 원을 가린다. */
.board-seat {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  display: block;
  padding: 0;
  text-align: center;
  background: var(--board-seat-ring);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: var(--board-seat-empty);
}
.board-seat--blue { border: 2px solid color-mix(in srgb, var(--board-team-blue) 40%, transparent); }
.board-seat--red { border: 2px solid color-mix(in srgb, var(--board-team-red) 40%, transparent); }
.board-seat--yellow { border: 2px solid color-mix(in srgb, var(--board-team-yellow) 40%, transparent); }
.board-seat--none { border: 2px solid color-mix(in srgb, var(--board-team-none) 40%, transparent); }
.board-seat--me { width: 28px; height: 28px; font-size: 12px; line-height: 24px; color: var(--board-accent); }
.board-seat--me.board-seat--blue { border-color: var(--board-team-blue); }
.board-seat--me.board-seat--red { border-color: var(--board-team-red); }
.board-seat--me.board-seat--yellow { border-color: var(--board-team-yellow); }
.board-seat--me.board-seat--none { border-color: var(--board-team-none); }
/* 빈자리 — 모집 중일 때 다음 자리 하나만, 점 세 개가 반복해서 깜박인다 */
.board-seat--empty {
  border: 1.5px dashed var(--board-seat-empty);
  display: flex; align-items: center; justify-content: center;
}
.board-seat__dot {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--board-text-dim); margin: 0 1px;
  animation: board-seatdot 1.2s infinite;
}
.board-seat__dot:nth-child(2) { animation-delay: .2s; }
.board-seat__dot:nth-child(3) { animation-delay: .4s; }
@keyframes board-seatdot { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .board-seat__dot { animation: none; opacity: .6; }
}

/* 배너 2종 — 타이머(앰버, 정원 참 카운트다운)·안내(코랄, 패스 세이브
   방이에요 등). 모집 카드 위에 배치(AC-1). */
.board-banner {
  padding: 14px 16px;
  border-radius: 12px;
}
.board-banner--timer {
  background: var(--board-amber-tint-bg);
  border: 1px solid var(--board-amber-tint-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* 하단 영역 안 타이머 배너(TICKET-357, canvas-v2 PostHostFull) — 영역이 gap 10px·padding-top 4px
   (`.bot--alert`)로 간격을 준다(배너는 항상 하단 영역 안). 본문 줄은 한 줄 말줄임. */
.bot--alert { gap: 10px; padding-top: 4px; }
.bot .board-banner--timer .board-banner__body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [홈으로] 하단 링크(TICKET-357) — canvas-v2 PostHostDone 링크 값 그대로, 색만 토큰. */
.board-home-link { display: block; text-align: center; font-size: 13px; color: var(--board-text-faint); padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; }
.board-banner--notice {
  background: var(--board-rule-tint-bg);
  border: 1px solid var(--board-rule-tint-border);
}
.board-banner__title { font-size: 15px; font-weight: 800; }
.board-banner--timer .board-banner__title { color: var(--board-time); }
.board-banner--notice .board-banner__title { color: var(--board-rule); }
.board-banner__body { font-size: 13px; margin-top: 4px; }
.board-banner--timer > div:first-child { min-width: 0; }
.board-banner__count {
  white-space: nowrap;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--board-time);
  flex-shrink: 0;
}
.board-banner__count--soon {
  font-family: 'Gothic A1', sans-serif;
  font-size: 22px;
  font-weight: 800;
}
.board-banner__count-unit {
  font-family: 'Gothic A1', sans-serif;
  font-size: 13px;
  font-weight: 800;
  margin-left: 2px;
  color: var(--board-text-dim); /* 정본 '초' A7B0C8 (TICKET-429) */
}

/* G1 홈 "최근 레이드" 목록(TICKET-296, PRD-016/AC-10, 계약 board.md §7-7) —
   디자인 정본 G1-홈.html 목록 항목 그대로, 색만 위 토큰 변수로 치환.
   모집 중 칩은 `.board-chip--open`(위 상태 칩 4종)과 색이 같아 그대로
   재사용한다. 마감됨 칩만 G1 정본 값(text-faint/surface)이 상세 페이지
   `.board-chip--closed`(text-dim/divider, participant.html/host.html의
   "마감" 칩)와 달라 이 화면 전용으로 새로 둔다 — 같은 "닫힘" 뜻이지만
   화면마다 디자인 정본 값이 다르다(스펙과 다른 곳 아님, 디자인 자체
   차이). 항목 전체가 `/p/{public_id}` 링크(AC-10 "누르면 이동")다. */
/* G1 목록 아래 여백(TICKET-355, PRD-020 AC-2) — 글이 4개 이상이어도 마지막 행과
   하단 고정 영역(페이드 40px) 사이에 간격이 남는다. */
.board-recent-list { padding-bottom: 16px; }
.board-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--board-divider);
  text-decoration: none;
  color: inherit;
}
/* TICKET-324 — 제목 아래 보조 줄(보스 원·이름·구분·출발 시각). 원은 보스 이미지(번호 없음, TICKET-407). */
.board-recent-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 0; }
.board-recent-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--board-text-dim); white-space: nowrap; overflow: hidden;
  padding: 2px 0 2px 2px; margin: -2px 0 -2px -2px; } /* 줄 크기 유지(TICKET-445 이전 링 여백) */
.board-recent-boss { margin: 3px; }
.board-recent-depart--now { color: var(--board-accent); }
.board-recent-kind { color: var(--board-text-faint); }
.board-recent-title {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--board-text);
}
.board-recent-title--closed { color: var(--board-text-faint); }
.board-recent-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.board-recent-count {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--board-text-dim);
}
.board-recent-chip--closed { color: var(--board-text-faint); background: var(--board-surface); }
.board-recent-arrow { color: var(--board-text-faint); font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════════
 * 게시판 v2 참여자 화면 전용 부품 (TICKET-288, PRD-016 AC-2)
 * 값은 doc/design/board/screens/{J1-참여전,J3-참여후,J4-참여취소확인,
 * J7-마감알림}.html·T0-스타일정본.html "COMPONENTS" 절을 그대로 옮겼다.
 * ══════════════════════════════════════════════════════════════════════ */

/* J1 "패스 세이브란?" 설명(AC-2) — doc/design/board/screens/J1-참여전.html
   하단 문단 그대로. */
/* J1 패스 세이브 동의 체크(PRD-027/AC-7) — screens/PostBeforeConsent.html. 체크 전 [참여하기]는 `.btn.x` 모양. */
.board-consent {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--board-rule-bg); border-radius: 14px; background: rgba(255,138,128,.06); cursor: pointer;
}
.board-consent[hidden] { display: none; }
.board-consent__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.board-consent__box {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--board-rule);
  box-sizing: border-box; margin-top: 1px; display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.board-consent__input:checked + .board-consent__box { background: var(--board-rule); color: var(--board-bg); }
.board-consent__input:focus-visible + .board-consent__box { outline: 2px solid var(--board-link); outline-offset: 2px; }
.board-consent__text { font-size: 13px; line-height: 1.6; color: var(--board-text-dim); word-break: keep-all; }
.board-consent__text b { color: var(--board-rule); font-weight: 800; }
.board-consent-note { text-align: center; font-size: 12px; color: var(--board-text-faint); margin-top: 6px; }
.board-consent-note[hidden] { display: none; }
#board-join-btn:disabled { background: var(--board-btn-secondary-bg); color: var(--board-text-faint); }

/* 참여 취소 버튼 2종(AC-2) — 하단은 테두리만(danger-outline), J4 다이얼로그
   확정 버튼은 채움(danger). T0 COMPONENTS 그리드의 같은 이름 두 버튼. */
.btn.danger-outline { background: transparent; border: 1.5px solid var(--board-danger); color: var(--board-rule); }
.btn.danger { background: var(--board-danger); color: var(--board-white); }

/* J4·J7 확인/알림 다이얼로그 — 정적 마크업 + JS가 hidden만 토글한다(옛
   board-common.js::showDialog처럼 매번 새 DOM을 만들지 않는다 — J4의
   취소 사유 라디오 같은 화면 고유 구조는 그 공용 헬퍼로 표현할 수 없어
   이번엔 화면 전용으로 짠다, 티켓 범위: participant.html·
   board-participant.js). 값은 각 screens/*.html의 오버레이 div 그대로. */
.board-dialog-overlay {
  /* fixed(TICKET-354, R8 층 순서) — 페이지가 뷰포트보다 길어져도 다이얼로그는
     보이는 화면 한가운데에 뜨고 하단 고정 영역(z 5) 위에 온다. */
  position: fixed;
  inset: 0;
  background: var(--board-scrim);
  display: flex;
  align-items: flex-end; /* 정본 T1 4-5: 다이얼로그도 화면 하단 기준 */
  justify-content: center;
  padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
  /* z-index — J2·J4·J7·O4 정적 오버레이와 `board-common.js::showDialog`의 동적
     오버레이는 둘 다 z-index 10이다(TICKET-354 이후). 같은 층이라 DOM append
     순서가 겹침 순서를 정한다. */
  z-index: 10;
}
.board-dialog {
  width: 100%;
  box-sizing: border-box; /* 테두리·안쪽 여백까지 포함한 폭이 기둥 안에 들어가도록(좁은 화면은 flex 축소라 폭 같음) */
  max-width: calc(var(--board-pillar-w) - 32px); /* fixed 오버레이는 화면 전체(막)지만 카드는 기둥 안 — 기둥 폭 − 오버레이 좌우 패딩 32 */
  /* 위쪽 하늘 그라데이션 테두리(T0C 4-2, TICKET-572 0-2 — 옛 "border-top 1px solid accent" 단색을 대체).
     1.5px solid transparent + 이중 배경: 안쪽(padding-box)은 바탕색, 테두리(border-box)는 토큰
     그라데이션(위 22% 하늘 → 45% 지점에서 투명, 양옆도 같은 세로 그라데이션이라 위쪽만 살짝 밝다). */
  border: 1.5px solid transparent;
  border-radius: var(--board-card-radius);
  background: linear-gradient(var(--board-surface), var(--board-surface)) padding-box,
    var(--board-glow-border-grad) border-box;
  padding: 20px; /* 정본 T0C 4-2 "기본" 변형 — 생성 확인(g2c)도 같은 20 */
  display: flex;
  flex-direction: column;
  text-align: center;
}
.board-dialog__title { font-family: var(--board-font-display); font-size: 22px; } /* T0C 4-2 제목 22(TICKET-602 — 모든 다이얼로그, 정적·동적 공통) */
.board-dialog__desc { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--board-text-dim); word-break: keep-all; }
.board-dialog__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 28px; /* 정본 T0 4-2: 버튼 위 28 */
}
/* 다이얼로그 버튼은 44/14가 기본(T0C 4-2 기본·제한 변형 렌더값) — 생성 확인(g2c)만 일반 버튼 크기(52/16)를
   유지한다(그 화면은 CTA를 크게 보여주는 의도적 예외, board-g2-confirm.css도 참고). */
.board-dialog__buttons .btn { height: 44px; border-radius: 14px; }
.board-dialog__buttons--g2c .btn { height: var(--board-btn-h); border-radius: 16px; }
/* O4 설명은 정본에 line-height가 없다(기본 줄간격) — J4·O3·J2는 1.6. */
.board-dialog__desc--left { text-align: left; } /* JS showDialog descAlign='left' */
/* 버튼 하나짜리(알림형, JS showDialog) — 1열 */
.board-dialog__buttons--single { grid-template-columns: 1fr; }
.board-dialog__desc--o4 { line-height: normal; }
/* J4 취소 사유 라디오(AC-9, TICKET-288이 폼만·TICKET-295가 전송까지 완성). */
.board-dialog__reasons {
  border: 0;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.board-dialog__reasons legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.board-dialog__reason {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--board-surface-border);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.board-dialog__reason input {
  accent-color: var(--board-accent);
  width: 18px;
  height: 18px;
  margin: 0;
}
/* 선택된 사유 강조(정본 "checked" 라디오 배경·테두리) — 서버 전송 없이
   순수 시각(:has()로 JS 없이 처리, 모던 모바일 웹뷰 전제는 board.css
   기존 관례 그대로 — dvh 등도 이미 그렇다). */
.board-dialog__reason:has(input:checked) {
  background: var(--board-divider);
  border-color: var(--board-accent);
}

/* ══════════════════════════════════════════════════════════════════════
 * 게시판 v2 2차(흐름) 전용 부품 (TICKET-292~295, PRD-016 AC-6~9)
 * 값은 doc/design/board/screens/{J2-친구추가후확정,J5-정원참,O2-정원참,
 * O4-연장확인,J6-연장됨}.html을 그대로 옮겼다(헌장 §9). `.board-banner`·
 * `.board-chip--time`·`.board-dialog__reasons` 등은 TICKET-287이 이미
 * "준비 단계"로 만들어 둔 공용 부품을 그대로 재사용한다(새로 만들지 않음).
 * ══════════════════════════════════════════════════════════════════════ */

/* 정원 참·연장됨 카드(J5/J6/O2/O4) — 배경·테두리만 다르고 나머지(칩·제목·
   주최자 줄·좌석 원)는 `.board-post-card`를 그대로 쓴다. */
.board-post-card--full {
  background: var(--board-card-bg-full);
  border: none;
  /* 정본 J5·J6·O2·O4 카드는 margin-top 12px(기본 카드 J1·J3·O1은 6px) — TICKET-429 */
  margin-top: 12px;
  --board-seat-ring: var(--board-card-bg-full);
}
/* 인원수도 앰버로(디자인 정본 "4 / 4" 색 변경, 좌측 큰 숫자·우측 작은
   "/ 4" 둘 다). */
.board-post-card__count--full,
.board-post-card__count--full small {
  color: var(--board-time);
}

/* 정원 참 카운트다운 뒤 하단 안내(J5/J6 — 참여 취소 버튼 자리를 대신한다,
   O2/O4는 대신 연장·마감 버튼 그리드를 쓴다). `.board-closed-note`(14px)
   와 달리 정본 실측값은 12px라 새 클래스를 둔다. */
.board-full-note { font-size: 12px; color: var(--board-text-faint); text-align: center; padding: 14px 0; }

/* O2/O4 하단 [연장하기]·[마감하기] 그리드(1:1.4, 정본 그대로 — O1의
   대기 버튼 하나짜리 `.bot`을 정원 참부터는 이 두 버튼으로 바꾼다). */
.board-bot-buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }

/* J2 트레이너 코드 상자(전체가 복사 버튼, ADR-1045 §2-1 "확정 전에도
   코드 공개") — doc/design/board/screens/J2-친구추가후확정.html 버튼
   그대로. */
.board-code-box {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--board-bg);
  border: 1px solid var(--board-surface-border);
  text-align: left;
  color: var(--board-text);
  font-family: 'Gothic A1', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.board-code-box__label { display: block; font-size: 12px; color: var(--board-text-dim); }
.board-code-box__crown { display: inline-block; width: 12px; margin-right: 4px; font-size: 11px; line-height: 1; vertical-align: middle; text-align: center; }
.board-code-box__copy { flex-shrink: 0; color: var(--board-link); }
.board-code-box__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.board-code-box__value {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 복사 영역 공통(PRD-017 AC-2, BOARD-SPEC 흐름 6-2) — O1·O2 링크 줄, J2 코드
   상자, J3·J6 [코드 복사]가 같이 쓴다. 영역 전체가 탭 대상이고 글자는 선택되지
   않으며, "복사" 칩은 버튼 모양(T0 작은 필 버튼과 같은 값)이다. 탭하는 동안
   (`.is-pressed`, JS가 pointerdown에 붙임 — iOS는 :active가 불안정) 영역이 살짝
   줄고 흐려졌다가 놓으면 돌아온다. */
.board-copy-area,
.board-copy-area * {
  -webkit-user-select: none;
  user-select: none;
}
.board-copy-area {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--board-press-ms) ease, opacity var(--board-press-ms) ease;
}
.board-copy-area:active,
.board-copy-area.is-pressed {
  transform: scale(var(--board-press-scale));
  opacity: var(--board-press-dim);
}
/* 줄 단위 복사(`.board-copy-row`, TICKET-380) — 눌림 효과는 복사되는 값과 복사 아이콘에만 준다.
   앞 라벨(링크·주최자)은 효과 없음. 탭 영역은 줄 전체 그대로(`::after` 확장 판정 포함). */
.board-copy-row:active,
.board-copy-row.is-pressed {
  transform: none;
  opacity: 1;
}
.board-copy-row > *:not(.board-post-card__label) {
  transition: transform var(--board-press-ms) ease, opacity var(--board-press-ms) ease;
}
.board-copy-row:active > *:not(.board-post-card__label),
.board-copy-row.is-pressed > *:not(.board-post-card__label) {
  opacity: var(--board-press-dim);
}
.board-copy-row:active > .board-copy-icon,
.board-copy-row.is-pressed > .board-copy-icon {
  transform: scale(var(--board-press-scale));
}
.board-copy-row .board-post-card__label,
.board-copy-row:active .board-post-card__label,
.board-copy-row.is-pressed .board-post-card__label {
  opacity: 1;
  transform: none;
  color: var(--board-text-dim);
}
/* 복사 피드백(PRD-048/AC-3) — 복사한 자리(JS가 `.is-copied`·`data-copied-text`를 1.5초 붙임)의 원래 문구를 숨기고
   같은 자리에 "복사되었습니다"를 덧씌운다. 원래 요소는 레이아웃에 그대로 남아 폭·높이가 변하지 않는다. */
.is-copied { position: relative; }
/* 명시도를 올려(0,2,0) 나중에 로드되는 화면 CSS의 .xxx { color } 규칙에 지지 않게 한다. */
.is-copied.is-copied { color: transparent; }
.is-copied > * { visibility: hidden; }
.is-copied::before {
  content: attr(data-copied-text);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; height: 100%;
  white-space: nowrap; font-family: 'Gothic A1', sans-serif; letter-spacing: 0;
  color: var(--board-link); font-weight: 700; visibility: visible;
}
.board-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 키보드 포커스 표시는 줄 단위 유지(접근성) */
.board-copy-row:focus-visible { outline: 2px solid var(--board-link); outline-offset: 2px; border-radius: 8px; }
/* 눌림 scale이 영역 자체를 줄이면 원래 가장자리에서 놓는 손가락이 영역 밖이 되어
   click이 안 나간다(TICKET-302 QA 관찰). 눌린 동안만 보이지 않는 확장 판정을
   붙여, 줄어든 상자가 원래 크기 이상을 덮게 한다(모양은 그대로). */
.board-copy-area:active,
.board-copy-area.is-pressed {
  position: relative;
}
.board-copy-area:active::after,
.board-copy-area.is-pressed::after {
  content: '';
  position: absolute;
  inset: -12px;
}

/* J2 다이얼로그 버튼 그리드는 O4/J4와 비율이 다르다(1:1.4, 정본 실측 —
   두 버튼 다이얼로그 기본은 `.board-dialog__buttons`의 1:1). */
.board-dialog__buttons--j2 { grid-template-columns: 1fr 1.4fr; margin-top: 28px; }

/* 진행 중인 레이드 제한 다이얼로그(JoinBlocked, PRD-025/AC-13) — 방 줄·두 버튼 간격. */
.board-dialog__buttons--blocked { grid-template-columns: 1fr 1.4fr; margin-top: 28px; }
.board-blocked-room {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--board-bg);
  border: 1px solid var(--board-surface-border);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.board-blocked-room__name { font-size: 14px; font-weight: 700; }
.board-blocked-room__chip {
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
  color: var(--board-text-faint);
  background: var(--board-divider);
}
.board-blocked-room__chip--open { color: var(--board-accent); background: var(--board-open-bg); }
.board-blocked-room__chip--full { color: var(--board-time); background: var(--board-time-bg); }

/* 연장(extend) 참여 기록 행 — 앰버(디자인 정본 J6 참여 기록 첫 줄, 다른
   행은 기본 텍스트색·취소는 `.cm--cancel`). */
.cm__host { color: var(--board-time); }
/* 참여자 화면의 '나' 줄(TICKET-353, T0 "참여 기록 색") — 줄 전체(글자·이름 상속). 취소 줄 알파는 그대로 겹친다. */
.cm__me { color: var(--board-log-me); }
.cm__num { font-family: 'Chakra Petch', sans-serif; font-weight: 700; }
.cm__crown { display: inline-block; width: 14px; margin-right: 4px; font-size: 11px; line-height: 1; vertical-align: middle; text-align: center; }
.cm b { font-weight: 700; color: inherit; }

/* J2 하단 버튼(PRD-029, JoinConfirm*.html) — 정본은 설명 아래 24px 빈 칸 + 버튼 줄 위 10px(= 34px). */
.board-dialog__buttons--j2 { margin-top: 34px; }
/* [포켓몬 GO 열기 ›] — 글자 뒤 화살표(JoinConfirmB2: gap 4px) */
.board-j2-open { display: flex; align-items: center; justify-content: center; gap: 4px; }
/* 잠금(①A, JoinConfirmAndroidA)엔 화살표 없이 글자만 — 화살표는 활성(②′, JoinConfirmB2)부터 */
.board-j2-open.is-locked svg { display: none; }
/* J2 다이얼로그 안쪽 여백(TICKET-429) — 정본 padding 20·gap 없음·제목 아래 16·설명 위 10(기본 .board-dialog는 24/20/16·gap 8).
   다른 다이얼로그(O3·J4·O4 등)는 기본값 그대로 이미 정본과 같아 건드리지 않는다. */
#board-j2-overlay .board-dialog { padding: 20px; gap: 0; }
#board-j2-overlay .board-dialog__title { margin-bottom: 16px; }
#board-j2-overlay .board-dialog__desc { margin-top: 10px; font-size: var(--board-j2-desc-size); } /* TICKET-620: 정본 J2 설명 14px */
#board-j2-overlay .board-dialog__buttons .btn { height: var(--board-btn-h); border-radius: var(--board-j2-btn-radius); } /* TICKET-620: 정본 J2 버튼 52px·r16(J2 범위만) */
/* 잠금 중 버튼 — 회색(secondary-bg 채움·footer-text 글자), 캔버스 대조 */
.btn.p.is-locked { background: var(--board-btn-secondary-bg); color: var(--board-footer-text); opacity: 1; } /* 정본 비활성 버튼은 투명도 없음(JoinConfirmA) */

/* ══ TICKET-326 모집 카드 보스 줄(전용 블록 — 병렬 티켓과 충돌을 줄이려고 파일 끝에 둔다) ══ */
/* 보스 줄(TICKET-326, PRD-018/AC-17) — 원(도감번호)·이름·구분·출발 시각.
   O·J 정본 화면엔 자리가 없어 G2a 보스 카드(원 74px·Chakra Petch·이름 15px)의
   모양을 카드 토큰으로 줄였다. */
.board-post-card__boss { display: flex; align-items: center; gap: 12px; }
.board-post-card__boss-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.board-post-card__boss-name { font-size: 15px; font-weight: 800; color: var(--board-text); }
.board-post-card__boss-kind { font-size: 12px; font-weight: 700; color: var(--board-text-dim); margin-left: 2px; }
.board-post-card__boss-depart { font-family: 'Chakra Petch', 'Gothic A1', sans-serif; font-size: 13px; font-weight: 700; color: var(--board-text-dim); }
.board-post-card__boss-depart--now { color: var(--board-accent); }

/* 참여자 좌석 원 행(PRD-022/AC-2) — 원끼리 -7px 겹침(나 앞은 -8px), 10명도 같은 규칙.
   늦게 들어온 사람이 위(z-index는 마크업이 계산). */
.board-post-card__seat-row { display: flex; align-items: center; isolation: isolate; }
.board-post-card__seat-row .board-seat + .board-seat { margin-left: -7px; }
.board-post-card__seat-row .board-seat--me + .board-seat, .board-post-card__seat-row .board-seat + .board-seat--me { margin-left: -8px; }
/* 카드 안 복사 아이콘(PRD-019/AC-1 (d)) — 아이콘만, 터치 36px, 하늘색(정본 복사 버튼) */
/* 줄 전체가 복사 버튼(TICKET-359) — <button> 기본 모양을 지워 줄과 똑같이 보이게 한다. 아이콘은 표시용. */
.board-copy-row {
  width: 100%; margin: -4px 0; padding: 4px 0; min-height: 36px; box-sizing: border-box;
  border: none; background: transparent; color: inherit; font: inherit; text-align: left;
}
.board-copy-icon {
  width: 36px; height: 36px; margin: -4px 0; padding: 0; border: none; border-radius: 10px;
  background: transparent; color: var(--board-link);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* ══ 바텀시트 공통 틀(T0C 4-3, TICKET-600 통합) — `board_bottom_sheet` 매크로가 그리는 유일한 시트 틀.
   스크림·시트·손잡이·모서리·위쪽 그라데이션 테두리·좌우 4px 띄움·층은 여기 한 곳이고, 화면마다 다른 것은
   매크로 인자로 고르는 변형 클래스뿐이다: tone(바탕) · tier(층) · size(높이) · pad(안쪽 여백).
   배치는 두 가지 — 형제형(스크림·시트가 따로, QJ·프로필 수정·결과 시트)과 감싸기형(스크림이 시트를 품음, 보스 고르기·
   직접 입력·나라·운영자). 둘 다 같은 클래스를 쓰고 JS는 자기 구조대로 `hidden`을 토글한다. */
.board-sheet-scrim { position: fixed; inset: 0; background: var(--board-sheet-scrim); z-index: 50; }
.board-sheet-scrim--tier2 { z-index: 60; } /* 시트 위에 겹쳐 여는 둘째 시트(나라) */
.board-sheet-scrim[hidden] { display: none; }
.board-sheet {
  position: fixed; left: var(--board-sheet-inset); right: var(--board-sheet-inset); bottom: 0; z-index: 51;
  margin: 0 auto; width: auto; max-width: calc(var(--board-pillar-w) - 2 * var(--board-sheet-inset)); box-sizing: border-box; /* 기둥 안(T1 13) */
  /* 안쪽 여백은 모든 시트 공통 한 값(2026-10-10 사용자 확정) — 시트별 변형 없음 */
  padding: var(--board-sheet-pad-top) var(--board-sheet-pad-x) var(--board-sheet-pad-bottom); gap: 14px;
  /* 위쪽 하늘 그라데이션 테두리 — 다이얼로그(T0C 4-2)와 같은 트릭. 아래 테두리는 없다(T0C 4-3). */
  border: 1.5px solid transparent; border-bottom: 0;
  border-radius: var(--board-sheet-radius) var(--board-sheet-radius) 0 0;
  display: flex; flex-direction: column;
}
.board-sheet--tier2 { z-index: 61; }
.board-sheet[hidden] { display: none; }
/* 바탕(tone) — 화면별 정본: deep = QJ1·프로필 수정·나라·운영자 #0F1528 / surface = 결과 시트·보스 고르기·직접 입력 #151C33 */
.board-sheet--deep { background: linear-gradient(var(--board-sheet-inner), var(--board-sheet-inner)) padding-box, var(--board-glow-border-grad) border-box; }
.board-sheet--surface { background: linear-gradient(var(--board-surface), var(--board-surface)) padding-box, var(--board-glow-border-grad) border-box; }
/* 높이(size) — 긴 시트(보스 고르기·직접 입력·나라): 화면 높이 − (헤더 52 + 위 여백 56). 안쪽 간격은 구조 따라(긴 시트 0) */
.board-sheet--tall { height: calc(100dvh - var(--board-sheet-top-gap)); gap: 0; }
.board-sheet.board-result-sheet { gap: 16px; } /* 결과 시트 3종 안쪽 간격(내용 배치, 틀 값 아님) */
.board-sheet__handle { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--board-surface-border); }

/* ══ 보스 고르기 시트(TICKET-329 G2a) 안쪽 — 바깥 틀은 위 공통 틀(TICKET-600). `.g2a-*` 이름은 유지. ══ */
.g2a-title { font-family: 'Black Han Sans', sans-serif; font-size: 22px; margin-top: var(--board-sheet-title-gap); } /* TICKET-621: 긴 시트는 gap 0이라 손잡이 아래 간격(정본 G2a·G2b)을 제목이 직접 갖는다 */
/* 제목 줄 시간대 버튼 + 안내 띠(A3, 10-08 결정) — 보스 시트 안에 있던 나라 칩(TICKET-558)이 제목 줄로 옮겨왔다.
   현지(자동)는 회색 보통, 다른 시간대는 하늘(`--board-country`, 글로우 없음). 안내 띠는 박스 밖(제목 아래)에 옅은 하늘 바탕+테두리+ⓘ. */
.g2-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g2-tzchip {
  height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--board-surface-border); background: transparent;
  color: var(--board-text-dim); font-family: 'Gothic A1', sans-serif; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0;
}
.g2-tzchip > span::after { content: " ▾"; }
.g2-tzchip.is-picked { border-color: var(--board-country); background: var(--board-country-bg); color: var(--board-country); font-weight: 800; }
/* 색을 country(teal)로 교정(TICKET-572 처리목록, 정본 p2-WriteOtherTZ·p2-WriteAfterHours — 둘 다 같은 톤,
   옛 accent(하늘/시안) 색은 T0와 다르다). 아이콘도 "ⓘ" 글자 대신 T0 정본의 원형 정보 SVG로. */
.g2-tznotice {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--board-tz-notice-bg);
  border: 1px solid var(--board-tz-notice-border); display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5; color: var(--board-text);
}
.g2-tznotice[hidden] { display: none; }
.g2-tznotice__icon { color: var(--board-country); flex-shrink: 0; margin-top: 1px; }
.g2-tznotice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g2-tznotice__title { font-size: 14px; font-weight: 400; color: var(--board-text); line-height: 1.5; }
.g2-tznotice__desc { font-size: 14px; font-weight: 700; color: var(--board-country); line-height: 1.5; }
.g2a-kinds { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.g2a-kind {
  height: 44px; border-radius: 12px; border: 1px solid var(--board-surface-border); background: transparent;
  color: var(--board-text); font-family: 'Gothic A1', sans-serif; font-size: 14px; font-weight: 800; padding: 0; cursor: pointer;
}
.g2a-kind.on { border-color: var(--board-accent); background: var(--board-accent-tint); color: var(--board-accent); }
/* 이너 박스: 시트 이너 색·테두리 없음(TICKET-345, AC-8) */
.g2a-box { margin-top: 14px; padding: 10px; background: var(--board-sheet-inner); border: none; border-radius: 16px; flex: 1; min-height: 0; overflow: hidden; position: relative; box-sizing: border-box; display: flex; flex-direction: column; }
/* 맨 위 고정 줄(TICKET-403, PRD-025/AC-15) — G2a 정본: 하늘 13/700, 스크롤되지 않음, 보스가 없어도 보임 */
.g2a-manual { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 6px 0 12px; background: transparent; border: 0; color: var(--board-accent); font-family: 'Gothic A1', sans-serif; font-size: 13px; font-weight: 700; position: relative; z-index: 3; flex: none; cursor: pointer; }
.g2a-scroll { position: relative; z-index: 1; /* 자체 쌓임 맥락 — 칸 안 z-index 요소가 틀에 고정된 페이드(z 2) 위로 새지 않게(TICKET-612) */ flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.g2a-scroll::-webkit-scrollbar { display: none; }
.g2a-fade { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.g2a-fade--top { top: 0; height: 18px; background: linear-gradient(var(--board-sheet-inner), var(--board-sheet-inner-clear)); }
.g2a-fade--bot { bottom: 0; height: 36px; background: linear-gradient(var(--board-sheet-inner-clear), var(--board-sheet-inner)); }
.g2a-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 20px; }
.g2a-msg { padding: 24px 8px 12px; text-align: center; font-size: 13px; color: var(--board-text-faint); }
.g2a-tile { /* 칸 자체는 투명 버튼 — 보스 카드(.boss-image--card)가 테두리·바탕을 그린다(TICKET-445) */
  position: relative; box-sizing: border-box; display: block; padding: 0; border: 0; background: transparent;
  color: var(--board-text); font-family: 'Gothic A1', sans-serif; cursor: pointer; text-align: center;
}
.g2a-tile.on .boss-image--card { border-color: var(--board-accent); }
/* 성급 줄(TICKET-610, 정본 p2-TierDraft: 이미지 영역 74→64, 성급 줄 높이 10·margin-top -6) — 보스 카드는 이름이 바닥 6px에
   떠 있는 절대 배치라 같은 값을 이렇게 옮긴다: 이름 아래 줄(바닥 6px, 높이 10, TICKET-612로 이름 위에서 아래로)을 따로 두고 그림 칸을 64/74만큼 줄여
   (높이 56.7%→49%, 위끝은 그대로) 줄이 그림 아래 여백에 놓이게 한다. 카드 높이·이름 위치·종류 마크는 그대로. */
.g2a-tile > .boss-tier { position: absolute; left: 0; right: 0; bottom: 6px; justify-content: center; z-index: 2; pointer-events: none; }
/* TICKET-612: 성급 줄은 이름 아래(바닥 6px), 이름은 그 위로 — 이름 바닥 = 줄 바닥 + 줄 높이 + margin-top(−2) */
.g2a-tile .boss-image--card .boss-image__name { bottom: calc(6px - 1px + var(--board-tier-row-h) + var(--board-tier-margin-top)); } /* −1px = 카드 테두리(이름은 카드 안쪽 기준이라 1px 높게 놓임) → 실측 간격 −2 */
.g2a-tile .boss-image--card .boss-img { bottom: 33%; height: 49%; }
.g2a-tile--upcoming > .boss-tier { bottom: 20px; }
/* 선택 표시는 하늘 테두리 + 이름 네온뿐 — 나머지 이름은 회색(T0 보스 카드) */
.g2a-tile.on .boss-image__name { font-weight: 800; color: var(--board-accent); text-shadow: 0 0 8px var(--board-accent-glow); }
/* 선택 불가 칸(서버가 selectable=false를 주는 경우) */
.g2a-tile.is-upcoming { cursor: default; }
.g2a-tile.is-upcoming .boss-image--card { opacity: 0.5; }
/* 예정 보스 카드(PRD-042/AC-6, T0 3-6 "예정") — 그림·이름만 흐리게, 카드 안 왼쪽 위 앰버 칩 "예정"(오른쪽 위 구분 마크와 대칭),
   시작 시각은 이름 바로 아래 앰버 11px. 카드 밖에 붙이지 않아 높이·격자는 일반 카드와 같다.
   이름 자리(바닥 6px)를 한 줄 위로 올리고 그 아래 시각을 둔다. */
.g2a-tile--upcoming .boss-image__art, .g2a-tile--upcoming .boss-image__name { opacity: 0.5; }
.g2a-tile--upcoming .boss-image--card .boss-image__name { bottom: calc(20px - 1px + var(--board-tier-row-h) + var(--board-tier-margin-top)); }
.g2a-upcoming {
  position: absolute; top: 4px; left: 4px; z-index: 1; pointer-events: none;
  font-size: 11px; font-weight: 800; line-height: 1; border-radius: 6px; padding: 3px 6px;
  color: var(--board-time); background: var(--board-time-bg);
}
.g2a-upcoming__time {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2; pointer-events: none;
  font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--board-time);
}
/* 다이맥스 탭 제보 카드(PRD-034/AC-1) — T0에 견본 없음. 기존 칩 토큰(.board-chip--time 색·글자 11/800·모서리 6)을 카드 왼쪽 위에 작게 얹는다. 새 색 없음 */
.g2a-reported {
  position: absolute; top: 4px; left: 4px; z-index: 1; pointer-events: none;
  font-size: 11px; font-weight: 800; line-height: 1; border-radius: 6px; padding: 3px 6px;
  color: var(--board-time); background: var(--board-time-bg);
}
.g2a-btns { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn.x.g2a-close { color: var(--board-text-dim); } /* .btn.x(0,2,0)에 덮이지 않게 같은 접두 — TICKET-429 */
/* G2 보스 줄 — 고른 뒤 상태(그림 60·보스 이미지+구분 마크, 이름 아래 구분) */
.g2-boss__thumb.is-picked { width: var(--boss-size); height: auto; border: none; border-radius: 0; background: transparent; }
.g2-boss__name.is-picked { color: var(--board-text); }
.g2-boss__kind { display: block; font-family: 'Gothic A1', sans-serif; font-size: 12px; font-weight: 700; color: var(--board-text-dim); margin-top: 2px; }

/* G1 진행 중 카드는 board-home-quick.css(p2-MainLive) */

/* O6·J8 하단 [홈으로] — 주 버튼 바로 아래 줄(screens/O6-마감후.html 링크 padding 8px 0 2px, TICKET-397). */
.board-home-link--under-btn { padding: 8px 0 2px; }
/* 정본 [홈으로]는 faint 색 — `body.board-body a`(링크색, 0,1,2)에 덮여 청록으로 보이던 것을 같은 접두로 바로잡는다(부수 수정). */
body.board-body a.board-home-link,
body.board-body a.board-home-link:hover { color: var(--board-text-faint); }

/* 종료·결과 시트(PRD-025/AC-4, screens/ReportSheetStart.html) — 정본은 .pg 안 absolute지만 페이지 전체 스크롤
   구조라 viewport 기준 fixed로 옮긴다(층: 하단 영역 z 5·다이얼로그 z 10 위). 값은 정본 그대로, 색만 토큰. */
/* 바깥 틀(스크림·시트·손잡이)은 공용 `.board-sheet*`(TICKET-600). 손잡이 끌기용 터치 영역만 넓힌다(보이는 모양 불변, AC-18)
   — board-end-sheet.js가 `.board-result-sheet__handle`로 잡으므로 클래스는 남긴다. */
.board-result-sheet__handle { position: relative; touch-action: none; }
.board-result-sheet__handle::after { content: ''; position: absolute; left: -40px; right: -40px; top: -12px; bottom: -16px; }
.board-result-sheet__title { font-family: 'Black Han Sans', sans-serif; font-size: 22px; }
.board-result-sheet__sub { font-size: 13px; color: var(--board-text-dim); margin-top: 4px; }
.board-result-sheet__q { font-size: 13px; font-weight: 700; color: var(--board-text); margin-bottom: 8px; }
.board-result-sheet__grid { display: grid; gap: 8px; }
.board-result-sheet__grid--2 { grid-template-columns: 1fr 1fr; }
.board-result-sheet__grid--3 { grid-template-columns: repeat(3, 1fr); }
.board-result-choice {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 56px;
  border-radius: 14px; border: 1.5px solid var(--board-surface-border); background: var(--board-bg);
  color: var(--board-text); font-family: 'Gothic A1', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0 4px; white-space: nowrap; letter-spacing: -.3px;
}
.board-result-choice[aria-pressed="true"] { border-color: var(--board-accent); background: var(--board-accent-tint); }
.board-result-choice__icon { font-size: 18px; line-height: 1; }
.board-result-sheet__submit:disabled { background: var(--board-btn-secondary-bg); color: var(--board-footer-text); }
.board-result-sheet__submit:not(:disabled) { background: var(--board-accent); color: var(--board-accent-ink); }
.board-result-sheet__skip {
  background: none; border: none; color: var(--board-text-faint); font-family: 'Gothic A1', sans-serif;
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; cursor: pointer;
}

/* ══ TICKET-610 보스 성급 표시 공통 부품(PRD-018/AC-25, T0C 4-3 "성급 표시", 마크업 board/_boss_tier.html) ══
   이름 바로 아래 한 줄(TICKET-612, margin-top 토큰 -2) — 높이 10 고정(빈 줄도 유지), 아이콘 6×5·간격 3·투명 .7. 위치(여백)는 쓰는 곳이 정한다. */
.boss-tier { margin-top: var(--board-tier-margin-top); display: inline-flex; gap: var(--board-tier-gap); align-items: center; height: var(--board-tier-row-h); flex-shrink: 0; }
.boss-tier img { width: var(--board-tier-icon-w); height: var(--board-tier-icon-h); object-fit: contain; opacity: var(--board-tier-icon-opacity); }

/* ══ TICKET-445 보스 그림 공통 컴포넌트(PRD-030/AC-3, T0 "레이드 심볼(10-03)"·참고-보스카드시안) ══
   원·링 없음 — 정사각 칸에 보스 그림(object-fit contain, 왼쪽 아래 정렬), 구분 마크는 그림 뒤 오른쪽 위.
   74 이상(`--lg`): 그림 80% + 마크 30%(여백 8%). 작은 칸(`--sm`): 그림 100% + 마크 73%(44칸 마크 32 비율).
   카드(`--card`): 5:6 테두리 둥근 카드, 그림 80%·마크 30%, 이름은 아래. 일반은 마크 없음. */
.boss-image { position: relative; display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; box-sizing: border-box; width: var(--boss-size); }
.boss-image__art { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.boss-img { position: absolute; display: block; object-fit: contain; object-position: left bottom; z-index: 1; }
.boss-image--sm .boss-img { inset: 0; width: 100%; height: 100%; }
.boss-image--lg .boss-img { left: 0; bottom: 0; width: 80%; height: 80%; }
.board-post-card__boss-circle.boss-image--lg .boss-img { width: 68%; height: 68%; } /* 모집 카드 74칸 그림 68%·왼쪽 아래(T0, TICKET-459) — G2 썸네일 60칸은 그대로 */
.boss-mark { position: absolute; top: 0; right: 0; z-index: 0; opacity: .9; box-sizing: content-box;
  background-repeat: no-repeat; background-position: right top; background-size: contain; background-origin: content-box; }
.boss-image--sm .boss-mark { width: 73%; height: 73%; }
.boss-image--lg .boss-mark { width: 30%; height: 30%; padding: 8%; }
.boss-mark--shadow { background-image: url('boss-marks/ic_shadow.png'); }
.boss-mark--dynamax { background-image: url('boss-marks/ic_dynamax.png'); }
.boss-mark--gigantamax { background-image: url('boss-marks/ic_gmax.png'); }
.boss-mark--mega { background-image: url('boss-marks/ic_mega.png'); }
.boss-image__name { font-size: 12px; color: var(--board-text-dim); text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.boss-image--card { width: 100%; aspect-ratio: 5 / 6; display: block; border-radius: 14px; background: var(--board-card-bg); border: 1px solid var(--board-divider); overflow: hidden; }
.boss-image--card .boss-image__art { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
.boss-image--card .boss-img { left: 10%; top: auto; bottom: 25%; width: 68%; height: 56.7%; object-position: left bottom; } /* 그림 68%·왼쪽 아래 — 마크(오른쪽 위)를 안 가림(TICKET-452) */
.boss-image--card .boss-mark { width: 30%; height: 25%; padding: 8%; }
.boss-image--card .boss-image__name { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2; margin-top: 0; font-size: 15px; font-weight: 700; color: var(--board-text-faint); padding: 0 4px; box-sizing: border-box; }

/* ══ 모집 카드 "위" 구역(T0C 4-1, TICKET-572 처리목록 재구성) ══
   보스 그림은 카드 배경 모드(절대 위치, 오른쪽 끝 156·위로 1px·왼쪽 페이드) — `.board-post-card__bgimg`.
   텍스트(보스 이름·한마디·칩)는 z-index 1로 그 위에. */
.board-post-card__boss-block { position: relative; overflow: hidden; padding: 26px 20px 22px; min-height: 158px; box-sizing: border-box; }
.board-post-card__bgimg {
  position: absolute; right: 0; top: 1px; width: var(--board-card-bg-size-post); height: var(--board-card-bg-size-post);
  object-fit: contain; object-position: center; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%);
}
.board-post-card__boss-col {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  text-shadow: 0 1px 2px var(--board-scrim), 0 0 8px var(--board-scrim);
}
.board-post-card__boss-title { display: flex; align-items: center; gap: 6px; }
.board-post-card__boss-title .board-post-card__boss-name { font-family: var(--board-font-display); font-size: var(--board-card-name-size); font-weight: 400; line-height: 1.1; white-space: nowrap; }
.board-post-card__chips { align-items: center; flex-wrap: wrap; margin-top: 4px; } /* T0 칩 줄 flex-wrap:wrap — 4칩일 때 보스 그림 영역을 침범하지 않고 다음 줄로(TICKET-469) */

/* ══ TICKET-431 주최자 카드 더보기 메뉴(PRD-028/AC-2) → TICKET-572 처리목록(T0C 4-1)에서 절대 위치로 재배치 ══
   개설 시각 줄이 없어져 더보기는 보스 블록 오른쪽 위에 절대 위치(옛 flex head 줄 삭제). */
.board-post-card__more {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  width: 32px; height: 32px; flex-shrink: 0;
  border: none; border-radius: 8px;
  background: var(--board-btn-secondary-bg); color: var(--board-text-dim);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.board-post-card__more[hidden] { display: none; }
.board-post-card__menu {
  position: absolute; right: 10px; top: 46px; min-width: 150px; padding: 4px;
  background: var(--board-btn-secondary-bg); border: 1px solid var(--board-surface-border);
  border-radius: 12px; box-shadow: 0 10px 24px var(--board-shadow); z-index: 5;
}
.board-post-card__menu[hidden] { display: none; }
.board-post-card__menu-item {
  width: 100%; height: 44px; border: none; border-radius: 8px; background: transparent;
  color: var(--board-menu-danger); font-family: 'Gothic A1', sans-serif; font-size: 14px; font-weight: 800;
  text-align: left; padding: 0 12px; display: flex; align-items: center; gap: 8px;
}

/* 숨 쉬는 글로우(T0A 1-5 `pt-glow`) — 정본 그대로: 2.4초 주기 박스섀도 + 네온 2px 테두리.
   쓰는 곳: 홈 진행 중 카드(G1), O1 링크 줄, J2 트레이너 코드 상자. 움직임 줄이기는 정본대로 고정 빛. */
@keyframes ptGlow { 0%, 100% { box-shadow: 0 0 14px var(--board-glow-lo); } 50% { box-shadow: 0 0 40px var(--board-glow-hi); } }
.pt-glow { animation: ptGlow 2.4s ease-in-out infinite; border: 2px solid var(--board-accent) !important; }
@media (prefers-reduced-motion: reduce) { .pt-glow { animation: none; box-shadow: 0 0 30px var(--board-glow-still); } }

/* ══ TICKET-571 B6 레이드 카드(10-07 결정) ══
   보스가 제목 → 구분 마크 → (다른 나라면 지구본) → 한마디 → 칩. "모집 중" 칩은 없다(상태 칩은 모집 중이면 hidden).
   아래 띠 두 줄(👑 주최자 / 좌석 원 + 인원), 주최자 링크 카드(체인 아이콘), 카드 그림자. */
.board-chip[hidden] { display: none; }
.board-post-card { box-shadow: 0 6px 16px var(--board-card-shadow-soft); } /* T0C 4-1 "그림자" 공통값 */
/* 주최자 카드(링크 카드가 겹쳐 나오는 큰 카드)는 그림자를 진하게(T0C 4-1 "큰 카드는 그림자 진하게"). */
.board-post-card-wrap .board-post-card { box-shadow: 0 6px 14px var(--board-card-shadow-strong); }
.board-post-card__boss-title { align-items: center; gap: 8px; }
.board-post-card__boss-title .board-post-card__boss-name { font-family: 'Black Han Sans', sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; }
.board-post-card__kind-mark { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background-size: contain; background-position: center; background-repeat: no-repeat; opacity: .9; }
.board-post-card__kind-mark.boss-mark--shadow, .board-post-card__kind-mark.boss-mark--dynamax,
.board-post-card__kind-mark.boss-mark--gigantamax, .board-post-card__kind-mark.boss-mark--mega { position: static; }
.board-post-card__globe { display: inline-flex; align-items: center; color: var(--board-country); flex-shrink: 0; }
.board-post-card__globe[hidden] { display: none; }
/* 한마디 — 제목 아래 작은 글씨(제목은 보스). 보스 값이 없는 옛 글은 제목 자리를 그대로 쓴다. */
.board-post-card__title { font-family: 'Gothic A1', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--board-text-dim); word-break: keep-all; overflow-wrap: anywhere; }
.board-post-card__title--lead { font-family: 'Black Han Sans', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; color: var(--board-text); }
.board-post-card__chain { display: inline-flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; color: var(--board-text-faint); }

/* ══ TICKET-571 A2 자리 잡기 남은 시간(J2) ══ — 정본 p2-PostJoinConfirm(canon-2026-10-08, TICKET-573 항목 4):
   설명 아래, 일반색(강조 없음). */
.board-j2-hold { margin-top: var(--board-j2-hold-gap); line-height: var(--board-j2-hold-line); font-size: 13px; font-weight: 400; color: var(--board-text-faint); text-align: center; }
.board-j2-hold[hidden] { display: none; }
/* TICKET-620: 정본 J2는 남은 시간 줄(18px) 아래 빈 칸 10 + 버튼 줄 위 10 = 20px. 남은 시간 줄이 없을 땐 위 34px 그대로. */
.board-j2-hold:not([hidden]) + .board-dialog__buttons--j2 { margin-top: var(--board-j2-buttons-gap); }
/* 숫자만 앰버(TICKET-574 3-4, 정본 p2-PostJoinConfirm 실측) — 둘레 문구는 위 기본색 그대로. */
.board-j2-hold__time { font-family: var(--board-font-mono); line-height: 1; font-weight: 700; color: var(--board-time); }

/* 마감 후 화면(O6·J8) 보스 한 줄 — 정본 O6-마감후·J8-마감후 첫 줄: 아이콘 32(8px 둥근 칸)·이름 14/800·한마디 13 faint 말줄임·출발 칩 12/700 (TICKET-590) */
.board-closed-bossline { margin-top: 10px; display: flex; align-items: center; gap: 8px; max-width: 100%; }
.board-closed-bossline__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--board-surface); display: inline-flex; align-items: center; justify-content: center; }
.board-closed-bossline__name { font-size: 14px; font-weight: 800; color: var(--board-text); white-space: nowrap; }
.board-closed-bossline__oneliner { font-size: 13px; color: var(--board-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.board-closed-bossline__depart { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--board-text-dim); background: var(--board-divider); border-radius: 6px; padding: 3px 7px; white-space: nowrap; font-family: var(--board-font-mono), 'Gothic A1', sans-serif; }

/* ══ TICKET-593 트레이너 정보 없음(PRD-037/AC-8) — 정본 p2-WriteNoTrainer·p2-WriteTrainerSheet·p2-JoinNoName ══ */
.board-gate-note { text-align: left; font-size: 13px; line-height: 1.6; color: var(--board-text-dim); margin-bottom: 10px; word-break: keep-all; }
.board-gate-note b { color: var(--board-rule); font-weight: 800; }
.board-gate-note[hidden], #board-gate-edit[hidden] { display: none; }
#board-gate-edit:not([hidden]) + #board-new-submit,
#board-gate-edit:not([hidden]) + #friend-write-submit { margin-top: var(--board-gate-submit-gap); }
.board-gate-sheet__title { font-family: var(--board-font-display); font-size: 22px; margin-top: 2px; }
.board-gate-field { display: flex; flex-direction: column; gap: 6px; }
.board-gate-field label { font-size: 12px; color: var(--board-text-faint); }
.board-gate-input { height: 48px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--board-surface-border); background: var(--board-surface); padding: 0 14px; font-size: 15px; font-family: inherit; color: var(--board-text); outline: none; }
.board-gate-input--code { font-family: 'Chakra Petch', sans-serif; letter-spacing: .5px; }
.board-gate-input.is-error { border-color: var(--board-rule); }
.board-gate-field__err { font-size: 12px; color: var(--board-rule); margin: 0; }
.board-gate-field__err[hidden] { display: none; }
.board-gate-save { margin-top: 8px; }
.board-gate-save:not(:disabled) { background: var(--board-accent); color: var(--board-accent-ink); }
#board-name-required-overlay .board-dialog__desc { margin-top: 8px; font-size: 14px; }

/* 마감 후 화면(O6·J8·G4·글 없음) 공용 블록 — TICKET-603. 값은 템플릿 인라인 style 원문 그대로. */
.board-closed { text-align: center; align-items: center; }
.board-closed--bare { padding-bottom: 0; }
.board-closed-center { margin: auto 0; }
.board-closed-title { font-size: 26px; }
.board-closed-title--top { margin-top: 6px; }
.board-closed-sub { font-size: 14px; color: var(--board-text-dim); margin-top: 10px; }
.board-closed-banner { width: 100%; box-sizing: border-box; margin-top: 16px; padding: 12px 16px; }
.board-closed-banner__body { font-size: 13px; color: var(--board-text); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-closed-steps { width: 100%; box-sizing: border-box; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.board-closed-steps__row { display: flex; gap: 10px; text-align: left; font-size: 14px; line-height: 1.5; }
.board-closed-steps__row--top { align-items: flex-start; }
.board-closed-steps__row--center { align-items: center; }
.board-closed-steps__no { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--board-divider); color: var(--board-accent); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.board-closed-steps__text--keep { word-break: keep-all; }

/* 마감 후 최종 라인업 카드(_partials/_final_lineup.html, TICKET-643 — 인라인 style을 옮김, 값은 그대로).
   rows의 grid-template-rows는 행 수에서 계산되는 동적 값이라 템플릿 인라인에 남겼다. */
.board-lineup { width: 100%; box-sizing: border-box; margin-top: 12px; background: var(--board-surface); border-radius: 18px; padding: 10px 16px 2px; text-align: left; }
.board-lineup__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--board-divider); }
.board-lineup__title { font-size: var(--board-font-size-13); font-weight: 800; color: var(--board-text-dim); }
.board-lineup__count { font-size: var(--board-font-size-14); font-weight: 800; color: var(--board-text); }
.board-lineup__count-num { font-family: var(--board-font-mono); font-weight: 700; font-size: var(--board-font-size-15); }
.board-lineup__host { display: flex; align-items: center; gap: 8px; min-height: 38px; font-size: var(--board-font-size-14); }
.board-lineup__host--ruled { border-bottom: 1px solid var(--board-divider); }
.board-lineup__crown { width: 22px; display: inline-flex; justify-content: center; font-size: var(--board-font-size-13); line-height: 1; flex-shrink: 0; }
.board-lineup__host-name { font-weight: 700; color: var(--board-time); }
.board-lineup__me { margin-left: auto; font-size: var(--board-font-size-12); color: var(--board-accent); font-weight: 800; }
.board-lineup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 16px; }
.board-lineup__row { display: flex; align-items: center; gap: 8px; min-height: 38px; font-size: var(--board-font-size-14); }
.board-lineup__row--two { gap: 6px; min-height: 34px; min-width: 0; }
.board-lineup__row--right { justify-content: flex-end; }
.board-lineup__row--ruled { border-bottom: 1px solid var(--board-divider); }
.board-lineup__num { width: 22px; flex-shrink: 0; font-family: var(--board-font-mono); font-weight: 700; font-size: var(--board-font-size-13); color: var(--board-text-faint); text-align: center; }
.board-lineup__num--empty { color: var(--board-seat-empty); }
.board-lineup__name { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.board-lineup__name--empty { color: var(--board-text-faint); }
.board-lineup__name--self { font-weight: 800; color: var(--board-log-me); text-shadow: 0 0 8px color-mix(in srgb, var(--board-log-me) 55%, transparent); }