/* =============================================
   파일명: community/community.css
   역할:   서버 커뮤니티 · 팀 게시판 공용 페이지 레이아웃 및 컴포넌트 스타일
           (Field Green 디자인 — 팀/서버 게시판 리스킨, 2026-08)
   사용처: templates/pc/community/index.html, templates/pc/team/board/list.html
   토큰:   .page-community 스코프에 --board-* 변수 선언 (전역 tokens.css는 건드리지 않음).
           배경/텍스트/테두리는 계속 --color-background-…/--color-text-…/--color-border-tertiary를
           써서 다크모드는 그대로 자동 대응, 강조색만 --logo-primary(필드 그린)로 교체.
   Gothic A1 · DM Sans 폰트는 CSS @import 대신 각 페이지 extra_css 블록의 <link>로 로드한다
   (파일 앞머리 주석 뒤에 오는 @import는 첫 규칙 제약 위반으로 파싱이 깨지는 브라우저가 있어 회피).
   ============================================= */

/* ── 게시판 전용 디자인 토큰 ─────────────────────────────────────
   .page-community(서버 커뮤니티·팀 게시판 전용 페이지) 뿐 아니라
   .page-team-detail(팀 상세 페이지의 "공지" 탭 — community-sidebar/board-item 등
   같은 클래스를 재사용해 게시판을 임베드)에도 적용해, 두 컨텍스트 모두에서
   --board-* 변수가 항상 유효한 값으로 해석되도록 한다. ── */

.page-community,
.page-team-detail {
  --board-accent:      var(--logo-primary);   /* #087853 — 워드마크와 동일한 필드 그린 */
  --board-accent-deep:  #064634;              /* 라이트 모드 hover/딥 톤 */
  --board-accent-soft:  #e7f3eb;              /* 라이트 모드 연한 배경 */
  --board-accent-line:  #cfe1d6;              /* 라이트 모드 연한 테두리 */
  --board-mint:          #8cf0bd;             /* 포인트(펄스·라벨) */
  --board-coral:          #ff5b42;            /* 공지/경고 포인트 */
  --board-font-display: 'Gothic A1', var(--cl-font);
  --board-font-number:  'DM Sans', var(--cl-font);
}

[data-theme="dark"] .page-community,
[data-theme="dark"] .page-team-detail {
  --board-accent-deep:  #0a4a37;
  --board-accent-soft:  rgba(140, 240, 189, .10);
  --board-accent-line:  rgba(140, 240, 189, .16);
}

/* ── 전체 레이아웃 ─────────────────────────────── */

/* 사이드바 + 메인으로 나뉘는 2열 레이아웃 */
.community-wrap {
  display: flex;                              /* 사이드바와 메인을 가로로 배치 */
  align-items: flex-start;                   /* 콘텐츠 길이가 달라도 위 정렬 유지 */
  gap: 20px;                                 /* 사이드바와 메인 사이 간격 */
  max-width: 1440px;                         /* 헤더(.header-inner)·서브내비와 같은 폭 — 좌우 끝 일치 */
  margin: 28px auto;                         /* 페이지 수직 여백 + 수평 중앙 정렬 */
  padding: 0 34px;                           /* 헤더와 같은 좌우 여백 */
  font-family: var(--board-font-display);
}

/* ── 사이드바 ────────────────────────────────────────────────
   각진 모서리 유지(border-radius 없음) — 팀 게시판 리스킨 요청안 기준.
   ".board-badge-notice"는 여기서는 더 이상 안 쓰지만 templates/pc/team/detail.html·front.html의
   임베드 보드 위젯이 계속 참조하므로 규칙 자체는 지운다. */

.community-sidebar {
  width: 220px;                              /* 사이드바 고정 너비 */
  flex-shrink: 0;                            /* 메인 영역이 좁아져도 사이드바는 줄지 않음 */
  background: var(--color-background-primary);  /* 카드 배경 (다크모드 자동 대응) */
  border: 1px solid var(--color-border-tertiary); /* 카드 외곽선 */
  border-radius: 0;                          /* 각진 모서리 */
  overflow: hidden;                          /* 모서리 안쪽 내용 넘침 방지 */
  position: sticky;                          /* 스크롤해도 사이드바는 화면에 고정 */
  top: calc(var(--site-header-height) + var(--subnav-height) + 16px);
  /* 헤더 + 서브내비 높이만큼 아래에 위치 */
}

/* 사이드바 상단 제목 영역 — 팀/서버 이름 없이 "팀 게시판"/"서버 커뮤니티" 라벨만 */
.sidebar-heading {
  padding: 17px 16px;                        /* 내부 여백 */
  font-size: 14px;                           /* 헤딩 글자 크기 */
  font-weight: 800;                          /* 굵게 */
  letter-spacing: -.02em;
  color: var(--color-text-primary);          /* 기본 텍스트 색 */
  border-bottom: 1px solid var(--color-border-tertiary); /* 목록과 구분선 */
}

/* 게시판 목록 (ul 기본 스타일 초기화) */
.board-list {
  list-style: none;                          /* 기본 li 점 제거 */
  margin: 0;
  padding: 0;
}

.board-item + .board-item { border-top: 1px solid var(--color-border-tertiary); }

/* 게시판 항목 링크 */
.board-item-link {
  display: flex;                             /* 아이콘·이름·글 수를 가로 배치 */
  align-items: center;                       /* 세로 중앙 */
  justify-content: space-between;            /* 이름은 왼쪽, 글 수는 오른쪽 */
  gap: 8px;
  padding: 13px 17px;                        /* 클릭 영역 여백 */
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);        /* 기본: 보조 색 */
  text-decoration: none;
  transition: background-color .12s, color .12s;
  box-shadow: inset 3px 0 transparent;       /* 활성 상태 좌측 바 자리 미리 확보 */
}

.board-item-link:hover {
  background-color: var(--board-accent-soft); /* hover 시 연한 Field Green 배경 */
  color: var(--color-text-primary);
}

/* 활성(현재 선택된) 게시판 항목 */
.board-item.active .board-item-link {
  background-color: var(--board-accent-soft); /* 활성 배경 */
  color: var(--board-accent);                /* 브랜드 색으로 강조 */
  font-weight: 800;
  box-shadow: inset 3px 0 var(--board-accent); /* 왼쪽 강조 바 */
}

/* 게시판 이름 (아이콘 + 텍스트) */
.board-item-name {
  display: flex;                             /* 아이콘과 텍스트 가로 배치 */
  align-items: center;
  gap: 9px;
  min-width: 0;
}

/* 항목 앞 도형 아이콘 — ▦ 전체 / ◇ 공지 / ○ 자유 / ◈ 그 외 */
.board-item-icon {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1;
}

.board-item.active .board-item-icon { color: var(--board-accent); }

/* 게시판별 글 수 */
.board-item-count {
  flex-shrink: 0;
  font-family: var(--board-font-number);
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-secondary);
}

.board-item.active .board-item-count { color: var(--board-accent); }

/* 사이드바 하단 안내 */
.sidebar-footer {
  margin: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border-tertiary);
}

.sidebar-footer span {
  display: block;
  color: var(--color-text-secondary);
  font-family: var(--board-font-number);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}

.sidebar-footer p {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.6;
}

/* 사이드바 빈 상태 */
.sidebar-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ── 메인 콘텐츠 영역 ────────────────────────────── */

.community-main {
  flex: 1;                                   /* 남은 공간 전부 차지 */
  min-width: 0;                              /* flex 아이템 축소 허용 (텍스트 넘침 방지) */
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 0;                          /* 각진 모서리 */
  overflow: hidden;
}

/* ── 게시판 헤더 ──────────────────────────────────── */

.board-header {
  display: flex;                             /* 제목/설명 왼쪽, 글쓰기 버튼 오른쪽 */
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--color-border-tertiary); /* 목록과 구분선 */
}

.board-header-left {
  display: flex;
  flex-direction: column;                    /* 제목 위, 설명 아래 */
  gap: 5px;
  min-width: 0;
}

.board-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--color-text-primary);
  margin: 0;
}

.board-desc {
  font-size: 12.5px;
  color: var(--color-text-secondary);        /* 설명은 보조 색으로 흐리게 */
  margin: 0;
}

/* 글쓰기 버튼 */
.btn-write {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 10px 16px;
  background: var(--board-accent);           /* 브랜드 색 배경 */
  color: var(--color-white);
  border-radius: 0;                          /* 완전 사각형 */
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(8, 120, 83, .16);
  transition: background-color .15s, transform .15s;
}

.btn-write:hover { background: var(--board-accent-deep); }
.btn-write:active { transform: scale(.97); }

/* ── 툴바 (분류 필터 · 검색) ─────────────────────────
   static/js/pc/community/index.js 가 data-board-filter/data-board-search 값으로
   .board-row 를 보이거나 숨긴다 — 현재 페이지에 렌더된 행만 대상. */

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-tertiary);
}

.board-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.board-filter-pills button {
  padding: 7px 13px;
  border: 0;
  border-radius: 0;                          /* 각진 사각형 */
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.board-filter-pills button:hover { background: var(--color-background-primary); color: var(--color-text-primary); }

.board-filter-pills button.active {
  background: var(--board-accent-soft);
  color: var(--board-accent);
}

.board-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 210px;
  padding: 8px 13px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 0;                          /* 각진 사각형 */
  background: var(--color-background-primary);
}

.board-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 12.5px;
}

.board-search input::placeholder { color: var(--color-text-secondary); opacity: .7; }
.board-search .ti { flex-shrink: 0; color: var(--color-text-secondary); font-size: 14px; }

/* ── 게시물 카드 목록 ────────────────────────────── */

.board-list { display: flex; flex-direction: column; }

.board-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 140px 64px 92px;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 0 18px;
  border-top: 1px solid var(--color-border-tertiary);
  color: inherit;
  text-decoration: none;
  transition: background-color .14s;
}

.board-list .board-row:first-child { border-top: 0; }

.board-row:hover { background: var(--board-accent-soft); }

.board-row[hidden] { display: none; } /* JS 필터·검색으로 숨김 처리 */

/* 고정 게시물 행 — 일반 행과 구분되는 배경 */
.board-row--pinned { background: linear-gradient(90deg, var(--board-accent-soft), transparent 85%); }
.board-row--pinned:hover { background: var(--board-accent-soft); }

/* 번호 · 핀 마커 */
.post-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--board-font-number);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

/* 고정 게시물 마커 — "고정" 텍스트 배지 (각진 모서리) */
.post-mark--pinned {
  width: 34px;
  padding: 4px 0;
  background: rgba(255, 91, 66, .12);
  color: var(--board-coral);
  font-family: var(--board-font-display);
  font-size: 10px;
  font-weight: 800;
}

/* 제목 — 한 줄로 말줄임 (카드 행 높이를 균일하게 유지) */
.post-row-title {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-row:hover .post-row-title { color: var(--board-accent); }

/* 작성자 — 이니셜 아바타 + 닉네임 */
.post-row-author {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 12.5px;
}

.post-row-author b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 실제 유저 아바타(사진 또는 실루엣 placeholder)와 동일한 규칙 —
   사이트 전역에서 쓰는 --color-avatar-bg 톤 + 사진 없으면 avatar_ph() SVG 실루엣,
   이니셜 텍스트는 쓰지 않는다(다른 아바타 컴포넌트와 동일). */
.post-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-avatar-bg);
}

.post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 날짜 */
.post-row-date {
  font-family: var(--board-font-number);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 조회수 · 좋아요 */
.post-row-metrics {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-family: var(--board-font-number);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.post-row-metrics .ti { margin-right: 2px; font-size: 12px; }

/* 고정 게시물 핀 아이콘 (post-mark 안에서 사용) */
.pin-icon,
.post-mark .ti {
  font-size: inherit;
}

/* 댓글 수 뱃지 */
.comment-badge {
  font-size: 12px;
  font-family: var(--board-font-number);
  color: var(--board-accent);                /* 브랜드 색으로 눈에 띄게 */
  font-weight: 700;
  flex-shrink: 0;
}

/* 공지 뱃지 — 게시판 전용 톤(전역 badge.css 오버라이드, 이 페이지 안에서만) */
.page-community .badge-notice {
  background: rgba(255, 91, 66, .12);
  color: var(--board-coral);
}

/* ── 페이지네이션 ─────────────────────────────────── */

.post-pagination {
  display: flex;                             /* 버튼들 가로 배치 */
  justify-content: center;                  /* 중앙 정렬 */
  align-items: center;
  gap: 4px;
  padding: 18px 24px;
  border-top: 1px solid var(--color-border-tertiary); /* 목록과 구분 */
  font-family: var(--board-font-number);
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 0;                          /* 각진 사각형 */
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .12s, color .12s, border-color .12s;
}

.page-btn:hover {
  background: var(--board-accent-soft);
  border-color: var(--board-accent-line);
  color: var(--board-accent);
}

/* … 생략 표시 — 클릭 불가, 장식용 */
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--color-text-secondary);         /* 번호 버튼보다 흐리게 */
  user-select: none;                          /* 드래그 선택 방지 */
}

/* 현재 페이지 버튼 */
.page-btn.active {
  background: var(--board-accent);           /* 브랜드 색 배경 */
  color: var(--color-white);
  border-color: var(--board-accent);
  font-weight: 800;
  pointer-events: none;                      /* 현재 페이지 재클릭 방지 */
}

/* ── 빈 상태 ─────────────────────────────────────── */

/* 분류 필터·검색 결과가 없을 때 — JS 가 hidden 토글 (게시판에 글이 아예 없는 .post-empty와 다름) */
.board-empty {
  padding: 40px 24px;
  color: var(--color-text-secondary);
  font-size: 13px;
  text-align: center;
}

/* 게시물이 없을 때 */
.post-empty {
  display: flex;
  flex-direction: column;                    /* 아이콘·텍스트·버튼 세로 배치 */
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 12px;
  color: var(--color-text-secondary);
}

.post-empty .ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--board-accent-soft);
  color: var(--board-accent);
  font-size: 26px;
}

.post-empty p {
  font-size: 14px;
  margin: 0;
}

/* 빈 상태 글쓰기 버튼 */
.btn-write-empty {
  margin-top: 4px;
  padding: 9px 22px;
  background: var(--board-accent);
  color: var(--color-white);
  border-radius: 0;                          /* 완전 사각형 */
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color .15s;
}

.btn-write-empty:hover {
  background: var(--board-accent-deep);
}

/* 게시판이 없을 때 (사이드바 포함 전체) */
.community-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 12px;
  color: var(--color-text-secondary);
}

.community-empty .ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--board-accent-soft);
  color: var(--board-accent);
  font-size: 30px;
}

.community-empty p {
  font-size: 15px;
  margin: 0;
}

.community-empty-sub {
  font-size: 13px !important;               /* 부제 글자 작게 — 메인 안내보다 시각적으로 약하게
                                               .community-empty p 의 기본값 덮어쓰기 필요 */
}

/* ── 말머리(분류 태그) ── */
.write-prefix-row { margin-bottom: 10px; }
.write-prefix-select {
  padding: 8px 12px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--board-accent-line); border-radius: 0;                          /* 각진 사각형 */
  background: var(--board-accent-soft); color: var(--board-accent);
}
/* "전체 글" 목록에서 각 행이 어느 게시판 글인지 보여주는 태그.
   공지(고정 게시물·admin_only 게시판)는 --notice 변형으로 붉게 표시하고,
   이 한 태그가 목록 안 "공지" 표시를 전담한다(기존 badge-notice는 이 목록에서 더 안 씀). */
.post-board-tag {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 6px;
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  font-family: var(--board-font-number);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

.post-board-tag--notice {
  background: rgba(255, 91, 66, .12);
  color: var(--board-coral);
}

.post-board-tag--free {
  background: var(--board-accent-soft);
  color: var(--board-accent);
}

.post-board-tag--game {
  background: rgba(59, 113, 140, .12);
  color: #3b718c;
}