/*
 * 게시판 최소 버전 전용 CSS (TICKET-264, 계약 doc/reports/TICKET-263/board-contract.md)
 *
 * doc/design/board/screens/*.html 각 화면 <head><style>에 반복되는 공통
 * 블록을 그대로 옮기되, 색·글꼴 값만 :root 변수로 치환했다(레이드
 * 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 참고)
 * 유동 레이아웃으로 바꿨다 — 모양(색·글꼴·간격·배치)은 그대로, 캔버스
 * 자체만 반응형으로 편 것이다. 상세는 티켓 보고서 "스펙과 디자인이 다른 곳".
 */

/* [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;
}

:root {
  --board-bg: #0B1020;
  --board-text: #F2F4FA;
  --board-text-dim: #A7B0C8;
  --board-text-faint: #7F89A6;
  --board-link: #3DD5F3;
  --board-link-hover: #8BE7F8;
  --board-surface: #151C33;
  --board-surface-border: #2C3656;
  --board-divider: #1E2742;
  --board-accent: #3DD5F3;
  --board-accent-ink: #06212A;
  --board-btn-secondary-bg: #1E2742;
  --board-btn-secondary-text: #7F89A6;
  --board-footer-text: #4A5578;
}

/* "앱처럼" 공통 항목(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 {
  margin: 0;
  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;
}
button: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;
  /* 구형 폴백(100vh) 먼저, 지원 브라우저는 100dvh로 덮인다(TICKET-268 —
     참여 기록이 길어질 때 하단 버튼이 페이지째 밀려 내려가던 문제의
     근본 원인이 `min-height`라 실제 뷰포트보다 페이지가 자랄 수 있었던
     것 — `.in`의 `flex:1`이 나눌 "남는 공간"이 없어 컨텐츠 크기만큼
     그대로 자랐다. `height`로 뷰포트에 고정해야 `.board-log-scroll`의
     `flex:1;overflow-y:auto`가 실제로 스크롤 영역이 된다). */
  height: 100vh;
  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 {
  height: 52px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.logo { font-family: 'Black Han Sans', sans-serif; font-size: 20px; opacity: .5; text-decoration: none; }
.me { font-size: 13px; font-weight: 700; color: var(--board-text-dim); text-decoration: none; }
.in {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.h { font-family: 'Black Han Sans', sans-serif; font-size: 28px; line-height: 1.25; margin: 0; }
.m { font-size: 12px; color: var(--board-text-faint); margin-top: 6px; }
/* 경과 시간 타이머(TICKET-269, 사용자 요청 — 화면이 멈춰 보임). 상태 줄
   (`.m`)이 `.in`(flex column, 기본 align-items:stretch)의 자식이라 이미
   전체 너비로 늘어나 있으므로, `.m`만 flex로 바꿔 오른쪽 끝에 붙인다. */
.board-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.board-elapsed { font-variant-numeric: tabular-nums; color: var(--board-text-faint); white-space: nowrap; }
.btn {
  height: 52px;
  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 { opacity: .55; cursor: not-allowed; }
.t {
  height: 44px;
  border: none;
  background: transparent;
  color: var(--board-text-dim);
  font-family: 'Gothic A1', sans-serif;
  font-size: 14px;
  font-weight: 700;
  width: 100%;
}
.card { background: var(--board-surface); border-radius: 18px; padding: 16px; }
.bot {
  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;
}
/* 참여 기록만 스크롤(TICKET-268, 사용자 폰 테스트 — 기록이 길어지면 하단
   버튼이 페이지째 밀려 내려갔다). `.in`(flex:1;min-height:0)이 이제
   `.pg{height:100dvh}` 덕분에 진짜 남는 공간을 갖게 되고, 그 공간을 이
   래퍼가 전부 가져가 안에서만 스크롤한다 — 제목·인원·패스세이브·코드
   같은 위 정보 블록은 그대로 고정 높이로 남는다(마크업은 `post.html`
   `log_section()` 매크로가 이 클래스로 감싼다). */
.board-log-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  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; }
.cm {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border-bottom: 1px solid var(--board-divider);
  font-size: 14px;
}
.cm .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cm .tm { margin-left: auto; font-size: 12px; color: var(--board-text-faint); }
.code { -webkit-user-select: text; user-select: text; }

/* B2 참여 인원 스테퍼 · 패스 세이브 토글 — 정본 인라인 스타일을 그대로
   옮기되 재사용 지점(토글 on/off)만 클래스로 뺐다. */
.board-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--board-divider);
}
.board-stepper-btn {
  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;
}
.board-stepper-btn:disabled { opacity: .4; cursor: not-allowed; }
.board-stepper-value {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 20px;
  width: 32px;
  text-align: center;
}
.board-toggle {
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--board-btn-secondary-bg);
  position: relative;
  display: inline-block;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.board-toggle .knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--board-text-faint);
  transition: left .12s ease;
}
.board-toggle.is-on { background: var(--board-accent); }
.board-toggle.is-on .knob { left: 23px; background: var(--board-bg); }

/* B3/B4 정보 행 */
.board-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--board-divider);
}
/* 라벨은 고정 너비(TICKET-269 3차, PL 추가 지시 — 실기기에서 긴 스테이징
   주소가 `.board-code-copy`를 밀어 라벨·복사 버튼까지 줄바꿈되던 문제).
   행 안의 가변 공간은 `.board-code-copy` 하나에만 준다. */
.board-info-row .label { font-size: 14px; color: var(--board-text-dim); white-space: nowrap; flex: none; }
.board-info-row .value { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; }
.board-info-row .value small { color: var(--board-text-faint); }
.board-code-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.board-code-copy .code {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .5px;
  /* 트레이너 코드(짧음)·링크(스테이징은 김) 공용 — 넘치면 줄바꿈 대신
     말줄임(복사 버튼은 표시 텍스트가 아니라 원본 문자열을 그대로 복사하므로
     잘려 보여도 복사 결과는 전체 주소다, board.js copyLinkBtn 참고). */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-copy-btn {
  border: none;
  background: transparent;
  color: var(--board-link);
  font-family: 'Gothic A1', sans-serif;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  flex: none;
  padding: 0 0 0 8px;
  height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.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-closed-note { font-size: 14px; color: var(--board-text-faint); text-align: center; padding: 14px 0; }

/* 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; }

/* B1 전용 오픈채팅 라운지 링크(TICKET-267) — 다른 화면엔 넣지 않는다. */
.board-lounge-link {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--board-link);
  text-decoration: none;
}
