@charset "utf-8";

/*--------------------------------------------
  0-0. 로컬 토큰 — 표준 토큰(tokens.css)에 대응물이 없는 값만.
       색·라운드·그림자는 var(--*) 만 사용한다(DESIGN_SYSTEM.md §7-2).
       이 파일은 목록·상세·쓰기 전부에서 로드되므로, list.css 와 공유하는
       토큰의 정의처는 여기다(list.css 는 목록에서만 로드됨).
--------------------------------------------*/
/* 스코프: tokens.css·list.css 브릿지와 동일하게 #nt_body (전역 누수 방지 정책).
   아래는 리터럴 값이라 :root 여도 깨지진 않지만, 스킨 토큰은 전역에 남기지 않는다. */
#nt_body {
  /* hover-lift 표면 — totolist 의 --vd-hover / --vd-bd-hover 와 동일 값.
     --vd-* 는 .vd-shell 스코프라 참조 불가하여 로컬로 복원(DESIGN_SYSTEM.md §3). */
  --fb-hover-lift: #FAFBFC;
  --fb-bd-hover:   #C7D4E8;
  /* 어두운 채움 버튼 — tokens.css 에 표면(배경)용 어두운 토큰이 없다.
     --ink 는 텍스트 토큰이며, 아래 둘은 기본/hover 가 쌍이라 하나로 합치면 hover 가 소멸한다. */
  --fb-btn-dark:       #323c46;
  --fb-btn-dark-hover: #29313a;
}

/* 구 §0 「분류 선택 (작성 화면)」(.fb-ca-select/.fb-ca-hint/.fb-ca-free) 제거 —
   작성폼이 bizevent 골격(.sbe-w-*)으로 바뀌면서 참조가 0이 됐다.
   분류 select 와 안내문은 event.css §6 의 .sbe-w-select / .sbe-help 가 담당한다. */

/*--------------------------------------------
  1. Layout & Containers
--------------------------------------------*/
/* #bo_list_wrap 규칙은 list.css 의 #bo_list_wrap.fb-wrap 이 특이도로 항상 이기고,
   상세·쓰기 화면엔 #bo_list_wrap 자체가 없어 죽은 규칙이었다 → 삭제. */

/* 카드 안쪽 상하 여백 — 좌우는 섹션 14 가 자식에 건다. 값은 토토 .vd-hero 와 동일 */
#bo_v {
  --fb-pad: 24px;                              /* 자유게시판 가로 내부 여백 단일 소스 (본문·메타·댓글 공통) */
  --cmt-inset: 0px;                            /* 댓글 내부는 0 — #viewcomment 섹션 패딩(var(--fb-pad))에 올라탐 (토토 .ts-review-content 방식) */
  background-color: var(--card) !important;
  box-shadow: none;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  padding-top: 0;
  padding-bottom: 0;
}

/*--------------------------------------------
  2. Title & Headings
--------------------------------------------*/
/* 제목 줄 — 진행 상태 뱃지(.sbe-badge, event.css §3)와 제목을 한 줄에 둔다.
   정보표 '진행 상태' 행을 대체한 것: 그 행은 바로 아래 '종료 일자'(카운트다운·시작 예정)와
   같은 사실을 두 번 말했고, 값이 단어 하나인데 행 하나를 썼다.
   좌우 패딩은 건드리지 않는다 — 아래 #bo_v #bo_v_title 규칙이 이미 0 으로 걷어내고 단은
   header 가 잡는다(그 주석 참조). 이 줄은 가로 배치와 아래 여백만 담당한다. */
.bo-v-titlerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0.1rem;
}
#bo_v_title {
  background: none;
  background-color: var(--card);
  color: var(--ink);
  font-weight: 700;
  padding: 0.15rem 1.25rem 0.1rem;
  border-radius: var(--r-6);
  /* .bo-v-titlerow 안에서 뱃지 옆 flex 아이템 — 긴 제목이 뱃지를 밀어내지 않게 한다.
     아래 여백은 .bo-v-titlerow 가 갖는다(margin-bottom 이관). */
  flex: 1 1 auto;
  min-width: 0;
}

/* 타이포그래피 오버라이드 (폰트테마 pc-*.css의 !important 우선)
   폰트테마가 #bo_v_title/#bo_v_con 폰트를 사이트 전역에 !important로 강제하므로
   free 보드 전용으로 2-id(#bo_v ...) + !important 한 패턴으로 우선 적용한다.
   ▶ 제목/내용 폰트 크기는 여기 두 줄에서만 조정. */
#bo_v #bo_v_title { font-size: 22px !important; }
#bo_v #bo_v_con   { font-size: 16px !important; }

/* 브레드크럼(게시판 › 분류 › 현재글) — 토토 .vd-crumb(view-detail.css) 와 동일 규격 */
.bo-v-cat {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem;
  margin-bottom: 0.85rem;
  line-height: 1.2;
  font-size: 13px !important;
}
.bo-v-cat__link { color: var(--sub); text-decoration: none; }
.bo-v-cat__link:hover { color: var(--brand); text-decoration: underline; }
.bo-v-cat__sep { margin: 0 5px; color: var(--sub); }
/* 마지막(가장 깊은) 단계 — 토토 .vd-crumb .cur 와 같은 강조. 여기선 링크라 hover 는 살아있다 */
.bo-v-cat__link--cur { color: var(--body); font-weight: 600; }

/*--------------------------------------------
  2-1. 히어로 (좌 썸네일 / 우 제목·메타·정보표)
  토토 .vd-hero(view-detail.css:147-223) 배치를 미러링한다. 섹션 탭(.vd-tabs)은 제외.
  이 보드는 #bo_v 자체가 카드라 토토처럼 배경 중화(#bo_v.vd-shell)가 필요없다.
  ▶ 좌우 섹션 패딩은 §14 의 `#bo_v > .bo-v-hero` 가, 하단 구조선은 §15 가 담당.
  ▶ event.css 는 $sbe_cfg 있을 때만 조건부 로드되므로 히어로 구조는 반드시 여기(항상 로드)에 둔다.
--------------------------------------------*/
.bo-v-hero {
  display: flex;
  gap: 22px;
  flex-wrap: nowrap;
  align-items: flex-start;   /* 썸네일이 비율을 고수하므로(아래 .bo-v-hero__thumb) 좌측 컬럼을
                                늘려 봐야 빈 칸만 생긴다 — 각 컬럼을 내용 높이로 둔다 */
}
.bo-v-hero__left  { flex: 0 1 320px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
.bo-v-hero__right { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }

/* 썸네일 — 리사이즈는 CSS 가 담당(썸네일 생성함수 호출 없음, 토토와 동일 방식).
   비율은 aspect-ratio 가 잡고 그 값을 고수한다: flex:0 0 auto 라 우측이 길어져도 늘어나지 않는다.
   구 flex:1 1 auto 는 좌우 바닥을 맞추려고 썸네일을 세로로 늘렸는데, 그러면 제목이 2줄이 되는
   것만으로 cover 크롭이 커져 같은 이미지가 목록과 다르게 보였다. 바닥 정렬보다 비율 일치가
   우선이므로(목록·모바일과 같은 그림이어야 한다) 늘어나는 쪽은 우측 텍스트 칸이 맡는다. */
.bo-v-hero__thumb {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  /* 4/3 — 목록 카드(event.css .sbe-thumb)·썸네일 생성(640x480)·권장 사이즈(600x450)와 동일 비율 */
  aspect-ratio: 4 / 3;
  border-radius: 13px;
  overflow: hidden;
  background: var(--thumb-bg);
}
/* 진행 상태 뱃지 오버레이 — 목록 카드가 상태를 썸네일에 얹는 것(event.css .sbe-thumb__chip)과 같은 자리.
   뱃지 자체(.sbe-badge)는 event.css 정의를 그대로 쓰고 여기선 위치만 준다.
   그림자는 필수다 — 뱃지 배경이 밝은 회색/브랜드 톤이라 밝은 이미지 위에서 경계가 사라진다. */
.bo-v-hero__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  border-radius: var(--r-4);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .28);
}
.bo-v-hero__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 이벤트 정보표 — 우측 컬럼의 남는 세로 공간을 흡수해 좌측 썸네일 하단과 정렬된다
   (토토는 .vd-site-table{flex:1 1 auto} 가 같은 역할) */
.bo-v-info {
  margin-top: 14px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: var(--r-12);
  overflow: hidden;
}
.bo-v-info__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;            /* 늘어난 표 높이를 행에 균등 분배 */
  min-height: 42px;
  padding-right: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.bo-v-info__row:last-child { border-bottom: 0; }
.bo-v-info__label {
  box-sizing: border-box;
  width: 96px;
  flex-shrink: 0;
  align-self: stretch;       /* 회색 라벨이 부푼 행 높이를 꽉 채운다 */
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  background: var(--surface-fill, #f4f4f4);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sub);
  white-space: nowrap;
}
/* gap:0 인 이유 — flex 컨테이너라 '1,000' 과 'P', 'N' 과 '명' 이 각각 별개의 (익명)flex 아이템이 된다.
   여기에 gap 을 주면 숫자와 단위 사이가 벌어져 한 값으로 안 읽혔다.
   값 사이 간격이 필요한 건 보조설명(.bo-v-info__sub) 뿐이라 그쪽만 margin 으로 띄운다. */
/* align-items:baseline — 숫자(Oxanium)와 단위 글자('명'·'P', Paperozi)는 글꼴도 크기도 달라
   center 로 맞추면 각자 제 상자 기준으로 가운데 정렬돼 서로 위아래로 어긋난다.
   글자끼리는 밑선(baseline)을 맞춰야 한 줄로 읽힌다. 행 자체의 세로 가운데는
   부모(.bo-v-info__row align-items:center)가 이미 담당한다. */
.bo-v-info__val {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
/* 수치와 단위 사이 3px — 0(gap:0)은 '1명'이 한 덩어리로 뭉쳐 붙고, 옛 gap 6px 은 벌어져 따로 놀았다.
   숫자 b 하나가 이 간격을 소유한다(포인트 P·인원 명 공통). */
.bo-v-info__val b { font-weight: 700; margin-right: 3px; }
/* 지급 포인트 — 브랜드 강조 (숫자 폰트는 §10 에서 일괄) */
.bo-v-info__point { font-size: 20px; font-weight: 700; color: var(--brand); }
/* 보조 설명(남음 / N명 지급 / 시작 예정) — em 이지만 기울임 해제 */
.bo-v-info__sub { font-style: normal; font-size: 13.5px; font-weight: 500; color: var(--muted-2); margin-left: 6px; }
/* 이 줄 안에서는 숫자도 한글과 같은 두께다. 위 .bo-v-info__val b 의 700 은 값 칸의 주 수치용이고,
   보조 설명에서까지 숫자만 굵으면 색이 같은데도 그 부분만 진해 보인다(획 굵기 착시).
   같은 특이성의 뒤 선언이라 !important 없이 이 컨텍스트에서만 되돌아간다. */
.bo-v-info__sub b { font-weight: inherit; }

/* 좁은 화면: 세로 스택 + 제목·메타를 썸네일 위로.
   display:contents 로 좌우 컬럼의 자식을 .bo-v-hero 의 직접 flex 아이템으로 승격시킨 뒤
   order 로 재배열한다 (마크업 변경 없이 컬럼 경계를 넘어 순서 조정 — 토토와 동일 기법). */
@media (max-width: 767px) {
  .bo-v-hero { flex-direction: column; flex-wrap: nowrap; gap: 12px; align-items: stretch; }
  .bo-v-hero__left,
  .bo-v-hero__right { display: contents; }
  /* order 미지정 자식이 0 으로 맨 위에 튀어오르는 것 방지 */
  .bo-v-hero__left > *,
  .bo-v-hero__right > * { order: 9; }
  .bo-v-hero .bo-v-titlerow  { order: 1; }
  .bo-v-hero .post-meta-list { order: 2; }
  .bo-v-hero__thumb          { order: 3; }
  /* 구 flex:0 0 auto 재선언 제거 — 데스크톱 기본값이 이미 0 0 auto 라 중복이었다 */
  .bo-v-info        { order: 4; margin-top: 0; flex: 0 0 auto; }
  .bo-v-info__row   { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .bo-v-info__row { min-height: 48px; }
}

/*--------------------------------------------
  3. Content Area
--------------------------------------------*/
#bo_v_con {
  color: var(--body);
  padding: 1.5rem;
  margin: 1rem 0;
  min-height: 200px;
  word-break: break-word;
  overflow: hidden;
}

/* 본문 이미지 반응형: 큰 이미지는 폭에 맞춰 축소, 작은 이미지는 원본 유지(확대 없음) */
#bo_v_con img {
  max-width: 100%;
  height: auto;
}

/* #bo_v_info 섹션은 히어로 도입으로 제거됨 — 메타 줄 스타일은 §5 .post-meta-list 소유 */

/*--------------------------------------------
  4. Buttons & Actions
--------------------------------------------*/
#bo_v_btn {
  text-align: right;
  padding: 0 1rem 0.2rem;
  align-self: flex-end;       /* 날짜·조회수 라인(작성자 하단 라인)에 맞춰 정렬 */
}

#bo_v_btn .btn {
  color: var(--ink);
  padding: 0.4rem 0.8rem;
  margin-left: 0.5rem;
}

#bo_v_btn .btn:hover {
  color: var(--ink);
}

.btn-safe-list {
  display: inline-flex;
  align-items: center;
  background-color: var(--fb-btn-dark);
  border: none;
  color: #fff !important;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--r-4);
  transition: background 0.3s ease;
}

.btn-safe-list:hover {
  background-color: var(--fb-btn-dark-hover);
  text-decoration: none;
}

.btn-safe-list i {
  font-size: 1rem;
}

#bo_v_bookmark {
  text-align: right;
  padding-right: 1.5rem;
  margin-top: -2rem;
}

/*--------------------------------------------
  5. Post Meta
--------------------------------------------*/
/* .post-meta-box 래퍼는 히어로 도입으로 제거됨 (구식 정의 삭제 — 덧대기 금지 규칙).
   메타 줄은 이제 .bo-v-hero__right 안에 직접 놓인다. 배경·하단선은 히어로가 담당(§15). */
.post-meta-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--sub);
}

.post-meta-list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.post-meta-list i {
  color: var(--muted-2);
  font-size: 0.85rem;
}

/* 게시글 메타 — 이 게시판은 쓰기등급 10(운영자 전용)이라 작성자 표기를 하지 않는다.
   아바타·레벨아이콘·닉네임 규칙(.pv-author / __avatar / __meta / __name-row / __name)은
   참조하는 마크업이 사라져 함께 제거했다. 등록일과 IP만 남는다. */
/* 등록일. 통계(.pv-stats)는 별도 li — 색은 §12 에서 같은 --sub 로 맞춘다. */
.post-meta-list .pv-author__date { display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; font-weight: 400; color: var(--sub); }
/* IP — 관리자에게만 노출($is_ip_view) */

/*--------------------------------------------
  6. Comments
--------------------------------------------*/
#bo_vc,
.cmt-box {
  background: var(--card);
  margin-top: 2rem;
  border-radius: var(--r-6);
}
/* 댓글 입력 박스 위쪽 간격 축소 */
.cmt-box { margin-top: 0.6rem; }

/* 댓글 영역 최상단(댓글 N개 카운트 위) 구분선 (얇고 연하게) */
#viewcomment {
  border-top: 1px solid var(--line);
}
/* 댓글 카운트 헤더: 폰트 키우고 숫자 색상도 검정으로 통일 */
.pv-cmt-head .float-left { font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.pv-cmt-head .float-left b { color: var(--ink); font-weight: 700; }
/* 댓글 헤더 우측 도구: [새 댓글] [정렬] */
.pv-cmt-tools { display: inline-flex; align-items: center; gap: 12px; }
.pv-cmt-tools .cmt-newbtn {
  border: 0; background: transparent; padding: 0;
  color: var(--muted-2); font-size: .85rem; font-weight: 500; cursor: pointer; line-height: 1;
  transition: color .12s ease;
}
.pv-cmt-tools .cmt-newbtn:hover { color: var(--ink); }
.pv-cmt-tools .cmt-newbtn .fa { font-size: .8rem; margin-right: 3px; }

#bo_vc .no_comment {
  color: var(--muted-2);
  padding: 1rem 0;
  text-align: center;
}

#fviewcomment #wr_content,
#fviewcomment #wr_content:focus,
.cmt-box .cmt-input-wrap #wr_content,
.cmt-box .cmt-input-wrap #wr_content:focus {
  background: transparent !important;   /* 포커스 시 부트스트랩 흰 배경 무력화 → 회색 알약 유지 */
  color: var(--body);
  border: 0 !important;
  outline: none !important;      /* 안쪽 파란 포커스 링(브라우저/부트스트랩) 제거 */
  box-shadow: none !important;
  padding: 6px 2px;
  resize: none;
  border-radius: 0;
  width: 100%;
  min-height: 26px;
  max-height: 320px;
  overflow-y: hidden;            /* 자동 높이확장(JS)으로 처리 → 상시 스크롤바 제거 */
  line-height: 1.5;
}

/* 댓글 입력칸: 알약형(pill) 한 줄 입력창 */
.cmt-box .cmt-input-wrap {
  border: 1px solid transparent;
  border-radius: var(--r-10);
  background: var(--field-bg);
  padding: 2px 6px 2px 16px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cmt-box .cmt-input-wrap:focus-within {
  background: var(--field-bg);  /* 포커스해도 흰색으로 바뀌지 않고 회색 유지 (눈부심 방지) */
  border-color: var(--line-2);
  box-shadow: none;
}
/* 입력 그룹: 가운데 정렬 + 가로 축소 */
.cmt-box .cmt-compose {
  width: 88%;
  margin-left: auto;
  margin-right: auto;
}
/* 입력칸 한 줄: textarea + 이모티콘/이미지 + 게시 버튼 */
.cmt-box .cmt-input-line {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cmt-box .cmt-input-line #wr_content { flex: 1 1 auto; }
.cmt-box .cmt-input-line .cmt-tools { display: flex; align-items: center; flex-shrink: 0; }
.cmt-box #wr_content::placeholder { color: var(--muted); }
/* "게시" 버튼 — 입력창 안쪽, 입력 내용이 있을 때만 부드럽게 등장 */
.cmt-box .cmt-input-line #btn_submit {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 31px;
  max-width: 0;                /* 평소엔 접힘(숨김) */
  margin-left: 0;
  padding: 0 !important;
  opacity: 0;
  transform: scale(0.9);
  overflow: hidden;
  pointer-events: none;
  border: 0 !important;
  border-radius: var(--r-8);
  background: var(--fb-btn-dark) !important;
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none !important;
  transition: max-width .18s ease, opacity .18s ease, transform .18s ease, margin .18s ease, padding .18s ease, background .15s ease;
}
/* 입력 내용이 있을 때만 게시 버튼 노출 (빠르고 부드럽게) */
.cmt-box .cmt-compose.has-text #btn_submit {
  max-width: 96px;
  opacity: 1;
  transform: scale(1);
  margin-left: 6px;
  padding: 0 14px !important;
  pointer-events: auto;
}
.cmt-box .cmt-input-line #btn_submit:hover { background: var(--fb-btn-dark-hover) !important; }
.cmt-box .cmt-compose.has-text #btn_submit:active { transform: scale(0.96); }
.cmt-box .cmt-input-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.cmt-box .cmt-input-toolbar .cmt-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}
.cmt-box .cmt-input-toolbar #btn_submit { flex-shrink: 0; }
/* 이모티콘/이미지 아이콘은 평평하게(주황 버튼 스타일 제거) — 등록 버튼은 그대로 */
.cmt-box .btn_comment {
  background: transparent !important;
  color: var(--muted-2) !important;
  padding: 0 !important;
  margin: 0 2px !important;
  transition: color .12s ease;
}
.cmt-box .btn_comment:hover { color: var(--ink) !important; }

/* 댓글 이모지/사진 아이콘 — 모던 라인 아이콘으로 교체 (코어 btn_comment.php 미수정, fa 글리프만 대체) */
.cmt-box .btn_comment[title="이모티콘"] .fa,
.cmt-box .btn_comment[title="이미지"] .fa {
  display: inline-block;
  width: 21px;
  height: 21px;
  vertical-align: middle;
  font-size: 0 !important;            /* 기존 fa 글리프 숨김 */
  background-color: var(--muted-2);          /* 아이콘 색 (mask 채움) */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 21px 21px;   mask-size: 21px 21px;
  transition: background-color .12s ease;
}
.cmt-box .btn_comment:hover .fa { background-color: var(--ink); }
.cmt-box .btn_comment[title="이모티콘"] .fa {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
}
.cmt-box .btn_comment[title="이미지"] .fa {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}

/* 본문 내 유니코드 이모지 */
.na-emoji { font-size: 1.15em; line-height: 1; vertical-align: -0.1em; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

/* === 게시글 하단 액션줄: 연결 네모 → 분리형 고스트 알약 === */
/* 버튼마다 알약을 두르지 않고, 그룹 전체를 감싸는 옅은 라운드 패널 하나만 둔다.
   본문 흰 배경 위에서 액션줄만 살짝 떠 보이게 하는 최소 장치. */
#bo_v_btn_group .btn-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--surface-fill, #f4f4f4);
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 10px;
}
/* 알약 배경·테두리 제거 — 댓글 좋아요 버튼과 동일한 평면 아이콘 형태.
   hover 시 아이콘 + 숫자 모두 파란색(댓글과 동일). */
#bo_v_btn_group .btn-group > .btn {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted-2) !important;
  padding: 0.45rem 0.6rem !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: color .15s ease;
}
#bo_v_btn_group .btn-group > .btn:hover,
#bo_v_btn_group .btn-group > .btn:focus {
  background: transparent !important;
  border: 0 !important;
  color: var(--brand) !important;
}
#bo_v_btn_group .btn-group > .btn { display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1; }
#bo_v_btn_group .btn-group > .btn .fa { font-size: 19px; }
/* 카운트 숫자 — 아이콘보다 1px 작게(댓글 좋아요와 같은 비율).
   값이 있으면 강조색(추천=브랜드 블루, 비추천=중립 다크), 0이면 회색.
   댓글 좋아요(.ts-helpful-count)와 같은 규칙이다. */
#bo_v_btn_group .bo-v-count {
  color: var(--muted-2) !important;   /* 기본 회색 — 남이 누른 카운트는 회색 (파랑은 내가 추천한 것만) */
  font-size: 18px;
  line-height: 1;
  position: relative;
  top: 1px;
  transition: color .15s ease;
}
#bo_v_btn_group .bo-v-count--no { color: var(--sub) !important; }  /* 비추천은 블루를 쓰지 않는다 */
#bo_v_btn_group .bo-v-count.is-zero { color: var(--muted-2) !important; }  /* 0이면 아이콘과 같은 회색 */
/* 내가 추천한 글만 파랑 (아이콘+숫자). 나리야 g5_board_good 기준 is-mine */
#bo_v_btn_group .btn.is-mine .fa,
#bo_v_btn_group .btn.is-mine .bo-v-count { color: var(--brand) !important; }
/* hover: 버튼 전체가 파랗게 → 숫자도 함께 */
#bo_v_btn_group .btn-group > .btn:hover .bo-v-count { color: var(--brand) !important; }
/* 플러스/마이너스(수동 높이조절) 숨김 — 자동확장으로 대체 (코어 btn_comment.php 미수정) */
.cmt-box button[title="댓글창 늘이기"],
.cmt-box button[title="댓글창 줄이기"] { display: none !important; }

#bo_vc input[type="submit"],
#bo_vc .btn,
#fviewcomment .btn {
  background: var(--fb-btn-dark);
  border: none;
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-weight: bold;
  transition: background 0.3s ease;
}

#fviewcomment .btn:hover:not(.btn_comment) {
  background: var(--fb-btn-dark-hover);
}

.comment-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  overflow: visible;
}
.comment-card.border-top { border: 0 !important; }                                               /* 모든 테두리 제거(Bootstrap 포함) */
.comment-card.border-top + .comment-card.border-top { border-top: 1px solid var(--line-soft) !important; margin-top: 4px; padding-top: 4px; } /* 댓글 사이: 잔선 (§15 위계) */
/* 호버 배경 없음 — 토토 상세도 후기 행 호버를 끈다(view-detail.css:522). 구분선만으로 행을 나눈다. */
.comment-card:hover { background: transparent; }

/* 답글: ↳ 화살표 제거 + 들여쓰기 해제(평평) + @부모닉네임 멘션 태그 */
.cmt-reply { display: none !important; }

/* 답글 작성 중 표시 — 답글 버튼을 누르면 comment_box() 가 이 스팬에 폼을 주입해
   :not(:empty) 가 된다(누른 순간부터 노출). 좌측에 ┗(L) 코너를 그려 "이건 답글" 임을 알린다. */
#bo_v .bo_vc_re:not(:empty) {
  display: block;
  margin-top: 4px;
}
/* ┗ 연결선 — 실제 보이는 입력 그룹(.cmt-compose, width:88% 중앙정렬)에 직접 붙인다.
   span(.bo_vc_re) 기준으로 잡으면 88% 중앙정렬 때문에 입력창 좌측(6% 안쪽)에 안 닿는다.
   compose 좌측 밖에서 세로로 내려와 코너를 compose 좌측 끝(x=0)에 붙여 입력창에 닿게 한다. */
#bo_v .bo_vc_re:not(:empty) .cmt-compose { position: relative; }
#bo_v .bo_vc_re:not(:empty) .cmt-compose::before {
  content: "";
  position: absolute;
  left: -14px;                 /* 입력 pill 좌측 바깥 */
  top: -5px;
  width: 14px;                 /* 우측 끝이 입력창 좌측(x=0)에 닿음 */
  height: 19px;
  border-left: 1.5px solid var(--line-2);
  border-bottom: 1.5px solid var(--line-2);
  border-bottom-left-radius: 9px;
}
.comment-card[style*="margin-left"] { margin-left: 30px !important; }  /* 답글: 원댓글보다 살짝 우측 들여쓰기 */
.cmt-mention {
  display: inline-block;
  margin-right: 5px;
  padding: 0;                       /* 알약 배경 제거로 좌우 여백 불필요 */
  background: transparent;          /* 배경 알약 제거 */
  color: var(--brand);              /* --ink → 브랜드컬러 */
  font-weight: 500;                 /* 600 → 500 한 단계 낮춤 */
  font-size: 0.9em;
  vertical-align: baseline;
}

.comment-card header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--sub);
}

.comment-card header ul,
.cmt-action-list {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.comment-card header li,
.cmt-action-list li {
  position: relative;
  font-size: 0.85rem;
}

.cmt-action-list {
  gap: 0.25rem;
  align-items: center;
}

.cmt-action-list li::before {
  content: "";
  margin: 0;
}

.cmt-action-list a {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  color: var(--sub);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.cmt-action-list a:hover {
  background: var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}

.cmt-like i {
  color: var(--ink);
  margin-right: 0.3rem;
}

.comment-card .cmt-content {
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--body);
  word-break: break-word;
  overflow: hidden;
}

/* 댓글 채팅형: 아바타 좌측 고정 / 닉네임·내용 같은 열 정렬 */
.comment-card .cmt-wrap.cmt-chat { position: relative; padding-left: 0; }
.comment-card .cmt-wrap.cmt-chat .cmt-chat__avatar { position: absolute; left: var(--cmt-inset); top: 10px; width: 35px; line-height: 0; z-index: 2; }
.comment-card .cmt-wrap.cmt-chat .cmt-chat__avatar .lv-badge-wrap { width: 35px !important; }
/* 레벨아이콘을 프로필사진 아래(겹침)로 — 우측 사이드바/채팅과 동일 비율 */
/* 채팅/프로필 래퍼와 동일하게 padding-bottom:5px → bottom:-5px 가 사진 기준 5px 더 아래 앵커 */
.comment-card .cmt-wrap.cmt-chat .cmt-chat__avatar { padding-bottom: 5px; }
.comment-card .cmt-wrap.cmt-chat .cmt-chat__avatar .xp-icon {
  position: absolute; bottom: -4.05px; left: 50%; transform: translateX(-50%); /* 사진 35 · 세로가림 24% */
  z-index: 2; margin: 0; line-height: 0; /* 기존 인라인 margin-right:-3px 무효화 */
}
.comment-card .cmt-wrap.cmt-chat .cmt-chat__avatar .xp-icon img {
  height: calc(35px * var(--na-lv-ratio, 0.80)) !important; width: auto !important; display: block; transform: none !important; /* lv-badge.css translateY(-6%) 무효화 */
  filter: drop-shadow(0 0.8px 1px rgba(0,0,0,0.15));
}
.comment-card .cmt-wrap.cmt-chat > header { border-bottom: 0; display: flex; align-items: center; padding-top: 12px; padding-bottom: 0; padding-left: calc(var(--cmt-inset) + 44px); min-height: 0; position: relative; }
/* 부트스트랩 py-2(상하 8px)를 걷는다 — 상단 여백은 header 의 padding-top 12px 하나가 갖는다.
   둘이 겹치면 닉네임 줄이 아바타(top:4px, 35px)의 시각 중심보다 8px 내려앉는다. */
.comment-card .cmt-wrap.cmt-chat > header > div { position: relative; flex: 1 1 auto; min-width: 0; padding-top: 0 !important; padding-left: 0 !important; padding-bottom: 0 !important; }
/* 닉네임 + 작성일은 한 줄이다 — 마크업(view_comment.skin.php)의 d-flex·align-items-center 를
   그대로 쓴다. 구 규칙은 여기서 flex-direction:column 으로 그 클래스를 뒤집어 날짜를
   아래 줄로 내렸고, 그 탓에 li+li 음수 마진 같은 세로 스택 보정이 딸려 있었다.
   가로 간격은 위 .comment-card header ul 의 gap 0.75rem 이 담당한다. */
/* margin 에 !important 를 걸지 않는다 — 걸면 IP 를 우측 끝으로 보내는
   margin-left:auto(아래 .cmt-ip-item)가 무력화된다. */
.comment-card .cmt-wrap.cmt-chat header ul > li { padding: 0 !important; margin: 0; line-height: 1.35; }
/* ⋯ 는 절대배치다. 흐름에 두면 26px 버튼이 19px 텍스트 줄보다 커서 헤더 높이를 부풀리고,
   IP 와의 사이에 ul gap(10px)까지 끼어 원래보다 벌어진다. 헤더가 한 줄이라 top:50% 로 정확히 중앙에 선다.
   기준은 header 가 아니라 안쪽 래퍼 div 다 — header 는 위에만 12px 패딩이 있어 박스 중심이
   글자 중심보다 6px 위다. 패딩이 없는 래퍼를 기준으로 삼아야 top:50% 가 글자 중심과 일치한다.
   right:0 = 래퍼 우측 끝 = header padding-right(4px) 안쪽 — 기존 위치와 동일하다.
   자리는 아래 .cmt-ip-item 의 padding-right 가 비워 둔다. */
#bo_v .comment-card .cmt-wrap.cmt-chat header .cmt-report-item { position: absolute; top: 50%; transform: translateY(-50%); bottom: auto; right: 0; margin: 0; }
/* 본문 — 토토 후기(.ts-review-content)와 동일 규격: 14px / lh 1.6 / --body */
/* 우측 4px = 헤더(.comment-card header padding-right:4px)와 같은 기준선.
   #viewcomment 의 px-3(14px)에 4px 를 더해 본문(#bo_v_con)과 같은 18px 단에 세운다.
   0 이면 댓글 내용만 ⋯ 보다 4px 바깥으로 삐져나온다. */
.comment-card .cmt-wrap.cmt-chat .cmt-content { padding: 2px calc(var(--cmt-inset) + 4px) 8px calc(var(--cmt-inset) + 44px) !important; margin-top: 0; font-size: 14px; line-height: 1.6; }
/* 닉네임 — 토토 후기(.ts-review-author)와 동일 규격: 14px / weight 500 / --ink.
   <a class="sv_member"> 는 부모 color 를 상속하지 않아 색을 직접 지정해야 한다
   (미지정 시 코어 nariya/css/g5.css:18 의 a{color:#000} 이 새어나온다). */
.comment-card .cmt-wrap.cmt-chat header ul > li:first-child,
.comment-card .cmt-wrap.cmt-chat header ul > li:first-child .sv_member { font-size: 14px; font-weight: 500; color: var(--ink) !important; }
/* 메타(작성일·IP) 톤 — 토토 후기 날짜와 동일한 --sub */
.comment-card .cmt-wrap.cmt-chat header ul > li:not(:first-child) { font-size: 0.78rem; color: var(--sub); }
/* IP(댓글 전용) — 최하위 티어(--muted-2)로 고정. 본문 작성자 IP 는 이 보드가 운영자 전용이라
   제거됐고(view.skin.php), 지금 IP 가 남는 곳은 댓글뿐이다.
   같은 줄의 날짜(--sub)보다 한 단계 옅은 것은 의도한 결과 — IP 는 날짜와 짝이 아니라 별도 티어다.
   마크업의 .text-muted(부트스트랩 #6c757d !important)를 토큰으로 덮으려면 !important 가 필요하다.
   헤더 ul 안 .text-muted 는 IP 하나뿐. */
.comment-card .cmt-wrap.cmt-chat header ul > li .text-muted { color: var(--muted-2) !important; }

/*--------------------------------------------
  8. Forms & Write
--------------------------------------------*/
/* 작성폼 골격은 event.css §6 이 단일 정의처다 — #bo_w 는 면 없는 레이아웃 셸이고
   카드 면(배경·경계선·라운드)은 .sbe-w-topbar / .sbe-w-card / .sbe-w-panel 이 각자 갖는다.
   여기 있던 아래 3덩이는 마크업이 bizevent 골격으로 바뀌며 참조 0이 돼 제거했다:
     · #bo_w 카드 면 + --fb-label-w (패널마다 면을 갖는 구조라 바깥 카드는 카드 안 카드가 된다)
     · #bo_w .list-group-item{...}·:first-child·:last-child  (list-group 스캐폴딩 폐기)
     · @media(min-width:768px) .form-group.row > .col-form-label 고정폭 (.sbe-ilabel 이 대체)
   ⚠ 형제 스킨(betting-tips·free-community)의 style.css 는 동명이지만 별개 파일이라 영향 없다.
     그쪽은 아직 list-group 작성폼이므로 이 제거를 그리로 복사하지 말 것. */

#bo_w #wr_content {
  margin-bottom: 1rem !important;
}

/* 모바일 본문 입력 높이 — 종전 160px 는 약 6줄이라 폰에서 이벤트 본문을 쓰기 어려웠다.
   (dhtml 에디터 사용 시 #wr_content 는 display:none 이라 textarea 폴백에만 적용된다) */
@media all and (max-width:575px) {
  .responsive #bo_w #wr_content {
    max-height: 240px !important;
  }
}

/*--------------------------------------------
  9. Pagination Utility
--------------------------------------------*/
#fboardlist {
  padding-bottom: 30px;
}

/* Override colored background for comment toolbar buttons */
.btn_comment {
  background: transparent !important;
  border: none !important;
}

/*--------------------------------------------
  상단 액션 버튼 (URL복사 · 더보기) + 더보기 드롭다운
--------------------------------------------*/
/* 링크복사·더보기 아이콘 크기 통일 */
#bo_v_btn .bo-v-ico {
  font-size: 1.15rem;
  line-height: 1;
  vertical-align: middle;
}

/* 더보기 드롭다운 메뉴 — 카드형 */
/* 카드형 드롭다운 (상단 더보기 · 댓글 정렬 공용) */
.dropdown-menu.bo-v-menu {
  width: max-content;
  min-width: 0;
  max-width: 220px;
  padding: 5px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  box-shadow: var(--sh-md);
  background: var(--card);
}

/* 메뉴 항목 */
.bo-v-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  border-radius: var(--r-8);
  white-space: nowrap;
  cursor: pointer;
}
.bo-v-item:hover,
.bo-v-item:focus {
  background: var(--line-soft);
  color: var(--ink);
  text-decoration: none;
  outline: none;
}
.bo-v-item .fa {
  width: 16px;
  font-size: 0.95rem;
  color: var(--muted-2);
  text-align: center;
}

/* 모달(이미지 업로드 등) 오픈 시 스크롤바 제거 보정으로 본문이 밀리는 현상 방지 */
html { overflow-y: scroll; }                 /* 스크롤바 거터 항상 확보 → 모달 열려도 폭 불변 */
body.modal-open { padding-right: 0 !important; }

/*--------------------------------------------
  10. 숫자류 폰트 (Oxanium) — 한글은 Paperozi 폴백
  (작성일/조회·댓글·추천 수, 댓글 날짜·추천수)
  본문 IP(.pv-author__ip)는 이 보드가 운영자 전용이라 제거됐다 — 관련 선언도 함께 걷었다.
--------------------------------------------*/
.post-meta-list .pv-author__date,
/* 히어로 정보표 — 칸 전체가 아니라 '수치'에만 건다.
   칸 전체에 걸면 Oxanium 에 없는 한글('명'·'P'·뱃지 글자)이 폴백(Paperozi)으로 그려지는데
   줄 높이는 첫 폰트(Oxanium) 메트릭으로 잡혀 기준선이 어긋난다 → 단위 글자가 위로 뜬다.
   숫자(b)·날짜(.bo-v-info__date)·카운트다운(.sbe-cd, event.css)만 숫자폰트. */
.bo-v-info__val b,
.bo-v-info__date,
#wr_good,
#wr_nogood,
.comment-card time,
.comment-card .cmt-ip,
.comment-card [id^="c_g"],
.comment-card [id^="c_ng"],
/* 댓글 페이징 — ul 의 나리야 .en(Roboto)을 덮는다 */
#viewcomment .pagination .page-link {
  font-family: 'Oxanium', 'Paperozi', sans-serif;
}

/*--------------------------------------------
  11. 상단바 — 목록으로(좌) + 브레드크럼 + 액션 아이콘(우)
  업체 상세(totolist/view-detail.css .vd-topbar)와 동일한 배치·치수.
  드롭다운 카드는 위 .bo-v-menu / .bo-v-item 을 그대로 재사용한다.
--------------------------------------------*/
.bo-v-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  /* px 고정 — rem 은 html{font-size} 가 PC 14 / 모바일 15 라 뷰포트마다 값이 흔들린다 */
  margin-bottom: 14px;
}

/* 「목록으로」 — 36px 높이, 아이콘 버튼과 동일한 라인 */
.bo-v-listbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 15px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-8);
  background: var(--card);
  color: var(--sub);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.bo-v-listbtn:hover {
  border-color: var(--fb-bd-hover);
  background: var(--fb-hover-lift);
  color: var(--brand);
  text-decoration: none;
}
/* FA 글리프는 em 박스 아래쪽에 그려져 옆 텍스트보다 낮게 앉는다 — 아이콘만 올려 시각 중심을 맞춘다 */
.bo-v-listbtn .fa { font-size: 15px; line-height: 1; position: relative; top: -1px; }

/* 브레드크럼: 상단바 안에서는 헤더용 여백(.bo-v-cat)을 걷어내고 가변폭으로 */
.bo-v-topbar .bo-v-cat {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0 !important;
  padding-right: 0;
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 우측 액션 (URL복사 · 설정) */
.bo-v-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bo-v-actions > .btn,
.bo-v-actions > .btn-group > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--line-2);
  border-radius: var(--r-8);
  background: var(--card);
  color: var(--sub);
  transition: border-color .15s, background .15s, color .15s;
}
.bo-v-actions > .btn:hover,
.bo-v-actions > .btn-group > .btn:hover {
  border-color: var(--fb-bd-hover);
  background: var(--fb-hover-lift);
  color: var(--brand);
}
/* 아이콘 크기 (#bo_v_btn 스코프였던 .bo-v-ico 규칙을 상단바용으로 재선언)
   16px = 규약 "상단바 액션 아이콘" 스텝(DESIGN_SYSTEM.md §2). 리스트 툴바(.fb-icon-btn)와 같은 값.
   rem 을 쓰지 않는 이유: 폰트테마가 html{font-size} 를 PC 14px / 모바일 15px 로 다르게 잡아
   (pc-Paperozi.css:11, mobile/mo-Paperozi.css:11) 이전의 1.15rem 은 PC 16.1px / 모바일 17.25px 로
   갈렸다. 리스트 아이콘은 고정 px 이라 모바일에서만 두 화면이 어긋난다. */
.bo-v-actions .bo-v-ico {
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
}
/* 부트스트랩 포커스 링·캐럿 제거 — 아이콘만 남긴다 */
.bo-v-actions .btn:focus,
.bo-v-actions .btn:active,
.bo-v-actions .btn.active,
.bo-v-actions .btn:not(:disabled):not(.disabled):active,
.bo-v-actions .btn:focus-visible,
.bo-v-actions .show > .btn.dropdown-toggle,
.bo-v-actions .show > .btn.dropdown-toggle:focus {
  outline: 0 !important;
  box-shadow: none !important;
}
/* open 상태: hover 와 구분되도록 배경만 한 톤 진하게 (cf. totolist view-detail.css:96) */
.bo-v-actions .show > .btn.dropdown-toggle {
  border-color: var(--fb-bd-hover);
  background: var(--line-soft);
  color: var(--brand);
}
.bo-v-actions .dropdown-toggle::after { display: none; }

/* 아주 좁은 화면: 브레드크럼은 「목록으로」와 역할이 겹치므로 숨기고 한 줄 유지 */
@media (max-width: 420px) {
  .bo-v-topbar { gap: 8px; }
  .bo-v-topbar .bo-v-cat { display: none; }
}

/*--------------------------------------------
  12. 메타 줄 통계 (조회·댓글·추천)
  통계는 작성일과 별도 li 라 §5 의 .pv-author__date 스코프에 걸리지 않는다.
  → 크기·색·숫자폰트를 여기서 선언한다(이 블록이 통계 스타일의 소유자).
  배치는 마크업의 ml-auto 가 담당한다 — 좌: 작성일 / 우: 통계.
--------------------------------------------*/
.post-meta-list .pv-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-weight: 400;
  /* 작성자 블록이 1줄 인라인이 되어(§5) 세로 보정이 불필요해졌다 — align-self 제거.
     우측 밀어내기는 마크업의 ml-auto(view.skin.php)가 한다 — 여기서 margin-left 를 다시 잡지 않는다. */
  line-height: 1.2;
}
.post-meta-list .pv-stats .pv-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  /* 좌측 날짜(.pv-author__date)와 같은 줄에 놓이는 같은 보조정보 티어 — 함께 --sub 로 유지한다. */
  color: var(--sub);
  font-family: 'Oxanium', 'Paperozi', sans-serif;
}
.post-meta-list .pv-stats i {
  font-size: 1rem;
  line-height: 1;
  color: var(--sub);
}
/* Font Awesome 글리프는 em 박스 아래쪽에 그려져 있어 숫자(Oxanium, 어센더가 높다)보다
   낮게 앉는다. 아이콘만 살짝 올려 시각 중심을 맞춘다.
   thumbs 는 솔리드 글리프(fa-thumbs-up/down)로 바뀌면서 아웃라인 시절보다 더 아래로 내려앉아
   같은 보정이 필요해졌다. */
.post-meta-list .pv-stats .fa-eye,
.post-meta-list .pv-stats .fa-commenting-o,
.post-meta-list .pv-stats .fa-thumbs-up,
.post-meta-list .pv-stats .fa-thumbs-o-up,
.post-meta-list .pv-stats .fa-thumbs-o-down,
.post-meta-list .pv-stats .fa-thumbs-down {
  position: relative;
  top: -1px;
}

/*--------------------------------------------
  13. 본문 폭 — 상세 900px (토토 .vd-wrap 과 동일) / 작성폼 832px (업체이벤트와 동일)
  상단바(.bo-v-topbar)와 본문 카드(#bo_v)는 .col-12.na-col 안의 형제 노드다.
  둘 다 같은 폭으로 묶어야 좌우 끝이 맞는다.
  작성폼(#bo_w)은 예전엔 상세와 같은 900px 이었으나, 업체이벤트(bizevent) 작성폼과
  폭을 맞추기 위해 832px 로 분리했다. 각 폭 옆의 네비 선언과 짝이다.
  (#bo_v/#bo_w 둘 다 좌우 패딩이 없어 선언값이 곧 카드 border-box 실폭)
--------------------------------------------*/
/* 네비를 본문 폭에 정렬 — 폭 조립은 custom-main.css 의 .na-top-sidemenu 가 담당.
   #bo_v 는 카드 자신(배경/그림자 보유)이라 선언값이 곧 border-box 실폭. */
.na-top-sidemenu--view { --na-content-w: 900px; }
.bo-v-topbar,
#bo_v {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* 작성폼만 832px — 업체이벤트(bizevent)의 작성폼과 같은 실폭에 맞춘다.
   bizevent 는 .be-write{max-width:860px; padding:0 14px} 라 '보이는 카드'는 832px 다.
   #bo_w 는 좌우 패딩이 없는 셸이라 그 실폭(832px)을 그대로 선언한다.
   ⚠ 그래서 상세(#bo_v 900px)와는 좌우 끝선이 다르다 — 업체이벤트 폭 통일이 우선(사용자 결정). */
#bo_w {
  max-width: 832px;
  margin-left: auto;
  margin-right: auto;
}
/* 네비도 같은 폭으로 — 폭 조립은 custom-main.css 의 .na-top-sidemenu 가 담당.
   #bo_w 는 면 없는 셸이지만 좌우 패딩이 0 이라 선언값이 곧 카드 border-box 실폭. */
.na-top-sidemenu--write { --na-content-w: 832px; }

/*--------------------------------------------
  14. 카드 안쪽 좌우 여백 통일
  제목 header 는 px-sm-0 라 데스크톱에서 패딩이 0 이 되어 테두리에 붙고,
  본문·메타·댓글헤더는 px-3 이라 단이 안 맞았다.
  카드 직계 섹션의 좌우 여백을 한 값으로 맞춘다. (댓글 카드는 이 안에서 아바타만큼 더 들여쓰기됨)
--------------------------------------------*/
/* 여백 단일 토큰 — 히어로·본문·버튼그룹·댓글영역 전부 4방향 같은 섹션 패딩(토토 .vd-card 방식).
   ▶ #bo_v 직계 섹션을 새로 추가하면 반드시 이 목록에 등록할 것 — 빠뜨리면 좌우 단이 어긋난다. */
#bo_v > .bo-v-hero,
#bo_v #bo_v_con,
#bo_v .sbe-panel,
#bo_v #bo_v_btn_group,
#bo_v #viewcomment {
  padding: var(--fb-pad) !important;
}
/* 이벤트글은 본문(#bo_v_con)이 '이벤트 설명' 섹션(.sbe-desc) 안으로 들어간다.
   섹션 패딩은 래퍼가 가지므로 본문 자신은 0 — 겹치면 좌우 48px 로 두 배가 된다.
   (일반글은 래퍼가 없어 위 규칙 그대로 적용) */
#bo_v .sbe-desc #bo_v_con {
  padding: 0 !important;
}
/* 댓글 영역: 내부 카운트(pt-3)·페이징(pb-3)이 이미 14px 상하 여백을 주므로
   섹션 상하는 그만큼 빼서 최종 24px(=--fb-pad) 로 맞춘다. 좌우는 그대로 24. */
#bo_v #viewcomment {
  padding-top: calc(var(--fb-pad) - 14px) !important;
  padding-bottom: calc(var(--fb-pad) - 14px) !important;
}
/* 댓글 영역(#viewcomment)은 px-3 그대로 둔다.
   여기에 패딩을 더하면 이미 여백이 충분한 댓글 카드까지 밀린다.
   대신 '댓글 N' 헤더만 더 줘서 본문과 같은 단에 세운다.
   px-3 = 1rem = 14px (테마가 html{font-size:14px}) → 14 + 4 = 본문 18px. */
#bo_v #viewcomment .pv-cmt-head {
  padding-left: var(--cmt-inset) !important;
  padding-right: var(--cmt-inset) !important;
}

@media (max-width: 600px) {
  #bo_v {
    --fb-pad: 18px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* 제목 자체 좌우 패딩(위 #bo_v_title)이 header 패딩에 더해져 혼자만 들어가 있었다.
   좌우는 0 으로 — 단은 header 가 잡는다.
   위쪽은 자체 패딩 + line-height:1.2 의 half-leading 이 얹혀 글자가 좌측(18px)보다 내려앉았다.
   패딩을 걷고 남는 half-leading 만큼 끌어올려 글자 기준으로 좌측과 맞춘다. */
#bo_v #bo_v_title {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-top: -2px;
}

/* 본문 상단 여백 정리 — 섹션 사이 간격은 각 섹션 패딩이 만든다(margin 겹침 제거) */
#bo_v #bo_v_con { margin: 0 !important; }   /* 상하좌우 패딩은 위 섹션 그룹 규칙(var(--fb-pad))이 담당 */

/*--------------------------------------------
  15. 구분선 색 — 디자인 시스템의 2단 위계
      구조선(섹션 경계) = var(--line-2)    … 토토 .vd-card/.vd-tabs 가 쓰는 --vd-bd2 와 같은 토큰
      잔선(리스트 항목) = var(--line-soft) … 규약상 "가장 옅은 구분선"

  기존 문제: 메타박스 아래 = 부트스트랩 #dee2e6, 댓글영역 위 = #e5e5e5, 댓글 사이 = #F0F1F3 으로
  세 선의 색이 제각각인 데다 구조선이 잔선보다 진하지 않아 위계가 흐렸다.
  (위치는 토토와 동일하게 카드 끝까지 긋는 풀블리드 유지)

  ※ 토토의 잔선은 현재 --line-soft(#EEF0F3)와 #EFF1F4 가 섞여 있다
    (view-detail.css:21,398 = #EEF0F3 / :262,529 = #EFF1F4 — 후자는 미토큰화 잔재).
    차이는 채널당 1로 지각 불가하며, SSOT 인 토큰을 따른다.
--------------------------------------------*/
/* 히어로 ↔ 본문 경계 = 구조선. 예전 .post-meta-box.border-bottom(부트스트랩 의존) 대체 —
   이제 부트스트랩 클래스에 의존하지 않고 히어로가 직접 자기 아래 선을 긋는다. */
#bo_v > .bo-v-hero {
  border-bottom: 1px solid var(--line-2);
}
#bo_v #viewcomment {
  border-top-color: var(--line-2);
}

/* 잔선(댓글 항목 사이·댓글 영역 내부).
   view_comment.skin.php:379(댓글없음 박스), :384(페이징 줄) 은 부트스트랩 .border-top 을
   그대로 써서 #dee2e6(진함)로 나온다. 구조선보다 진해지지 않도록 잔선 티어로 낮춘다. */
#bo_v #viewcomment #bo_vc_empty.border-top,
#bo_v #viewcomment .border-top.pb-3 {
  border-top-color: var(--line-soft) !important;
}

/*--------------------------------------------
  16. 댓글 입력창 아래 여백 = 위 여백
  입력창(aside#bo_vc_w)이 댓글 목록(section#bo_vc)보다 위에 있다.
  위 여백  = .cmt-box  margin-top 0.6rem  (213행에서 축소함)
  아래 여백 = #bo_vc   margin-top 2rem    (207행 공용 선언 — 여기만 안 줄여서 더 넓었다)
--------------------------------------------*/
#bo_v #bo_vc {
  margin-top: 0.6rem;
}

/*--------------------------------------------
  17. 댓글 헤더 폰트 정리
  - "／N 페이지"는 .float-left(1.2rem, 제목 크기)를 그대로 받아 너무 컸다.
    제목은 "댓글 N"까지만. 페이지 표시는 보조 정보라 도구 버튼과 같은 크기로 낮춘다.
  - 정렬 토글(#cmt_sort)은 font-size 지정이 없어 상속값을 써서 [새 댓글](.85rem)과 어긋났다.
    두 도구를 같은 크기·굵기·색으로 통일한다.
--------------------------------------------*/
/* 헤더 줄: float 기반이라 좌(댓글 N)·우(새댓글/정렬)의 세로 중심이 안 맞았다.
   flex 한 줄로 바꿔 baseline 이 아닌 '중앙'으로 정확히 정렬한다. */
#bo_v .pv-cmt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#bo_v .pv-cmt-head .float-left,
#bo_v .pv-cmt-head .float-right {
  float: none !important;
  display: inline-flex;
  align-items: center;
}

/* 댓글 개수 — 자유게시판(free-community/style.css 같은 블록)과 같은 값으로 통일한다:
   17px/--body. 20px/--ink 는 제목처럼 튀었다.
   ▶ 위쪽 이벤트 섹션 제목 2개('이벤트 설명'·'이벤트 참여', event.css §5 .sbe-panel__title)는
     20px 유지 — 그건 이 스킨 고유 컴포넌트라 자유게시판에 대응짝이 없다.
     즉 '셋이 함께 움직인다'는 옛 규칙은 폐기됐다(댓글 헤더는 보드 공통 쪽에 맞춘다). */
#bo_v .pv-cmt-head .float-left,
#bo_v .pv-cmt-head .float-left b {
  color: var(--body);
}
#bo_v .pv-cmt-head .float-left {
  font-size: calc(1rem + 1px);
  font-weight: 600;
}
/* 다크 — var(--body) 는 라이트 전용 토큰이라 분기가 없으면 어두운 배경에서 묻힌다.
   (자유게시판에는 이 분기가 없어 같은 자리가 어둡게 보인다 — 그쪽 손볼 때 함께 넣을 것) */
html.dark-mode #bo_v .pv-cmt-head .float-left,
html.dark-mode #bo_v .pv-cmt-head .float-left b {
  color: #d1d5db;
}
#bo_v .pv-cmt-head .float-left .pv-cmt-page {
  font-size: calc(.85rem + 2px);   /* +1px 상향 */
  font-weight: 400;
  color: var(--muted-2);
  margin-left: 4px;
}

/* 우측 도구 2개(새 댓글 · 정렬) — 항상 우측, 같은 높이선에 정렬.
   주의: flex 자식은 [button.cmt-newbtn] 과 [div.dropdown] 래퍼다.
   #cmt_sort(<a>)는 래퍼 '안쪽'이라, 래퍼를 정렬 대상에서 빼면 과거순만 어긋난다. */
#bo_v .pv-cmt-tools {
  margin-left: auto;          /* 우측 고정 */
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* 새 댓글 ↔ 과거순 위치 교체 — 과거순(.dropdown)을 새 댓글 앞(좌측)으로 */
#bo_v .pv-cmt-tools > .dropdown { order: -1; }
#bo_v .pv-cmt-tools > .cmt-newbtn,
#bo_v .pv-cmt-tools > .dropdown,
#bo_v .pv-cmt-tools #cmt_sort {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin: 0;
  padding: 0;
  line-height: 1;
}
#bo_v .pv-cmt-tools .cmt-newbtn,
#bo_v .pv-cmt-tools #cmt_sort {
  font-size: calc(.85rem + 1px);   /* 과거순·새 댓글 폰트 1px 내림 */
  font-weight: 500;
  color: var(--muted-2);
  text-decoration: none;
  white-space: nowrap;
}
#bo_v .pv-cmt-tools .cmt-newbtn:hover,
#bo_v .pv-cmt-tools #cmt_sort:hover {
  color: var(--ink);
  text-decoration: none;
}
/* 아이콘도 같은 중앙선에 — vertical-align 대신 flex 중앙 정렬을 쓴다 */
#bo_v .pv-cmt-tools .cmt-newbtn .fa,
#bo_v .pv-cmt-tools #cmt_sort .fa {
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  line-height: 1;
  margin: 0 3px 0 0;
  vertical-align: middle;
}
/* 정렬 화살표 — 꽉 찬 삼각형(fa-caret-down) 대신 얇은 선형 화살표(fa-angle-down).
   텍스트 '앞'(좌측)에 온다. 세로 위치는 부모(#cmt_sort)의 flex 중앙 정렬에 맡긴다
   (top 보정을 넣었더니 오히려 아래로 내려가 제거함). */
#bo_v .pv-cmt-tools #cmt_sort .fa-angle-down {
  font-size: 1rem;
  line-height: 1;
  margin: 0 4px 0 0;
  position: relative;
  top: 0;                     /* 화살표 세로 위치 (원위치) */
}
/* 새 댓글 SVG 아이콘 — 얇은 선형 리프레시(currentColor 상속) */
#bo_v .pv-cmt-tools .cmt-newbtn .cmt-new-ico {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;       /* 텍스트 베이스라인에 맞춤 */
  flex-shrink: 0;
}

/*--------------------------------------------
  19. 댓글 헤더 — 날짜·IP 를 닉네임 글자 중앙에 맞춤
  ⚠ 닉네임 li(첫 항목)는 건드리지 않는다. 아바타·댓글 본문과 정렬을 맞춰둔 기준점이라
     여기에 line-height/display 를 걸면 그 정렬이 함께 틀어진다.
  ul 의 align-items:center(부트스트랩)는 그대로 두고, 날짜·IP 쪽 박스만
  line-height:1 로 글자에 밀착시켜 '박스 중앙 = 글자 중앙'이 되게 한다.
  (여백이 남아 있으면 박스는 중앙이어도 글자는 위아래로 밀린다)
--------------------------------------------*/
/* 닉네임 ↔ 날짜 간격: ul gap(0.75rem=12px) + li 의 pr-2(8px) = 20px 로 애매하게 벌어져 있었다.
   pr-2 를 걷고 gap 만 7px 로 — 붙되 답답하지 않게.
   (li 의 좌우 패딩만 건드리므로 닉네임 자체의 위치·정렬 기준은 그대로다)
   IP 는 margin-left:auto 로 우측 끝에 서므로 이 gap 의 영향을 사실상 받지 않는다
   — 즉 이 값은 닉네임↔날짜 간격 전용이다. */
#bo_v .comment-card header ul.d-flex {
  gap: 7px;
}
#bo_v .comment-card header ul > li {
  padding-right: 0 !important;
}
/* IP·신고는 우측 끝으로 (날짜는 닉네임 옆에 그대로 둔다).
   :last-child 로 잡으면 IP 가 꺼진 경우($is_ip_view=false) 날짜가 우측으로 밀리므로
   전용 클래스로만 지정한다. */
#bo_v .comment-card header ul > li.cmt-ip-item {
  margin-left: auto;
  padding-right: 30px !important;   /* 절대배치된 ⋯(26px + right 4px) 자리를 비워 둔다 */
}

/* ⋯ 더보기 — 26×26 박스에 중앙 정렬 (다른 아이콘과 동일한 광학 여백) */
#bo_v .cmt-report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--muted-2);            /* 액션 아이콘 공통 톤 */
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
#bo_v .cmt-report-btn:hover,
#bo_v .cmt-report-item.show > .cmt-report-btn {
  color: var(--ink);
  background: var(--line-soft);
}
/* 부트스트랩 기본 캐럿 제거 (아이콘만 노출) */
#bo_v .cmt-report-btn.dropdown-toggle::after {
  display: none;
}
#bo_v .cmt-report-btn:focus,
#bo_v .cmt-report-btn:active {
  outline: 0 !important;
  box-shadow: none !important;
}
/* 세로 점 3개 — 점 크기는 SVG 의 circle r 값으로 조절한다 */
#bo_v .cmt-dots {
  width: 16px;
  height: 16px;
  display: block;
}
/* 드롭다운이 헤더 밖으로 잘리지 않도록 기준점만 제공 */
#bo_v .comment-card header ul > li.cmt-report-item {
  position: relative;
}

/* 답글·수정·삭제 — 아이콘 없이 텍스트만 (알약 배경 제거, 미니멀) */
#bo_v .cmt-action-list--text a {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 6px;
  border-radius: 0;
  background: transparent;
  color: var(--sub);                /* --muted → --sub 한 단계 더 진하게 */
  font-size: 13px;                  /* 좋아요 숫자와 동일 (실제 적용은 아래 1282행) */
  line-height: 1;
  position: relative;
  top: 0;                           /* 좋아요 아이콘(중앙 정렬)과 같은 높이 */
  transition: color .15s ease;
}
#bo_v .cmt-action-list--text a:hover {
  color: var(--ink);
  background: transparent;
  text-decoration: none;
}
/* 항목 사이 '|' 구분선 제거 */
#bo_v .cmt-action-list--text li::before {
  content: none;
}
/* header 가 display:flex(443행)라 그 안의 래퍼 div 가 '내용 너비'만 차지한다.
   → ul 에 남는 공간이 없어 위 margin-left:auto 가 밀어낼 여백이 없었다.
   래퍼와 ul 을 가로로 늘려 IP 가 실제로 우측 끝까지 가도록 한다.
   (닉네임은 첫 항목이라 좌측 고정 — 위치 변화 없음) */
#bo_v .comment-card header > div {
  flex: 1 1 auto;
  min-width: 0;
  /* 래퍼의 px-3 중 오른쪽 16px 때문에 사이렌이 우측 끝까지 못 갔다.
     오른쪽만 걷어낸다 (왼쪽은 닉네임 정렬 기준이라 유지). */
  padding-right: 0 !important;
}
/* 우측 기준선 = 본문과 동일 (카드 끝 기준).
   #viewcomment 가 이미 px-3(14px)을 갖고 있으므로 4px 만 더 주면 14+4 = 본문 18px.
   (0 으로 만들면 본문 기준선을 지나 카드 끝까지 나가버린다) */
#bo_v .comment-card header {
  padding-right: 4px;
}
#bo_v .comment-card header ul.d-flex {
  width: 100%;
}
#bo_v .comment-card header ul > li:not(:first-child) {
  display: flex;
  align-items: center;
  line-height: 1;
}
#bo_v .comment-card header time,
#bo_v .comment-card header .cmt-ip {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  /* 마크업의 .f-xs 가 폰트테마에서 12px !important (pc-Paperozi.css:38) 라 키우려면 !important 필요.
     13.5px = 규약 "보조 메타" 스텝(DESIGN_SYSTEM.md §2) — 토토 후기 날짜와 동일. 닉네임(14px)보다 작다. */
  font-size: 13.5px !important;
  /* Oxanium 은 본문 폰트보다 글자가 em 박스 위쪽에 그려져, 박스를 중앙에 둬도
     닉네임보다 살짝 떠 보인다. 1px 내려 시각 중심을 맞춘다(광학 보정). */
  position: relative;
  top: 1px;
}
/* 댓글 날짜 색 — --sub(li 상속) → --muted 한 단계 낮춤(연하게) */
#bo_v .comment-card .cmt-wrap.cmt-chat header time { color: var(--muted); }
/* 닉네임 li — 내용 폭만 차지한다. width:100% 이던 시절엔 이 li 가 줄을 다 먹어, 바로 옆의
   날짜가 우측 끝(더보기 버튼 자리)까지 밀려 겹쳤다. IP 는 별도 li(.cmt-ip-item)로 분리해 우측으로 보낸다. */
#bo_v .comment-card header ul > li:first-child {
  display: flex;
  align-items: baseline;
}

/*--------------------------------------------
  20. 좋아요 버튼 — 토토 '도움이됐어요' 버튼 이식
  원본: skin/board/totolist/custom-main.css:673-720 (.ts-helpful-*)
  문구만 '좋아요'. 카운트 0이면 회색(is-zero), 1 이상이면 파란색.
--------------------------------------------*/
/* 알약형 배경·테두리 없이 아이콘 + 숫자만.
   좋아요만 박스가 없으면 글리프가 그대로 좌측 끝에 노출돼, 26px 박스 안에 중앙 정렬된
   다른 아이콘들보다 6px 더 왼쪽으로 튀어나온다. → 좌측 그룹에 같은 6px 광학 여백을 준다. */
#bo_v .ts-helpful-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  line-height: 1;
  gap: 0.3rem;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--muted-2);            /* 액션 아이콘 공통 톤 */
  cursor: pointer;
  transition: color 0.15s ease;
}
/* hover: 아이콘 + 숫자 모두 파란색 */
#bo_v .ts-helpful-btn:hover {
  color: var(--brand);
  background: transparent;
}
/* .ts-helpful-count 는 자체 색(파랑 / is-zero 회색)을 갖고 있어 상속되지 않는다.
   hover 시에는 0이든 아니든 파란색으로 강제한다. */
#bo_v .ts-helpful-btn:hover .ts-helpful-count,
#bo_v .ts-helpful-btn:hover .ts-helpful-count.is-zero {
  color: var(--brand);
}
#bo_v .ts-helpful-btn i {
  font-size: 14px;           /* 액션 아이콘 공통 크기 */
  color: inherit;
  position: relative;
  top: -1px;                 /* 숫자보다 아래로 앉아 1px 올림 */
  /* 기존 .cmt-like i 의 margin-right:0.3rem(495행)이 버튼의 gap:0.3rem 에 더해져
     아이콘↔숫자 간격이 두 배(0.6rem)가 됐다. 버튼 안에서는 걷어낸다. */
  margin-right: 0;
}
/* 라벨('좋아요')은 화면에서 빼고 아이콘 + 숫자만 노출 (스크린리더용 .sr-only 로만 유지).
   → 토토의 .ts-helpful-label 보정 규칙은 불필요. */
/* 숫자 크기는 아이콘보다 1px 작게 — 본문 좋아요 버튼(아이콘 17px / 숫자 16px)과 동일 비율.
   Oxanium 은 어센더가 높아 박스 중앙 정렬만으론 글리프가 위로 뜬다 → top 으로 내려 아이콘과 시각 중심을 맞춘다. */
#bo_v .ts-helpful-count {
  font-weight: 700;
  font-family: 'Oxanium', 'Paperozi', sans-serif;
  font-size: 13px;
  color: var(--muted-2);            /* 기본 회색 — 남이 누른 카운트는 회색 (파랑은 내가 누른 것만) */
  min-width: 0;
  text-align: center;
  line-height: 1;
  position: relative;
  top: 1px;                         /* 아이콘과 시각 중심 맞춤 — 2px→1px 로 1px 올림 */
  transition: color .15s ease;
}
#bo_v .ts-helpful-count.is-zero { color: var(--muted-2); }
/* 내가 누른 좋아요만 파란색 (아이콘+숫자). 나리야 g5_board_good 기준 is-mine 클래스 */
#bo_v .ts-helpful-btn.is-mine,
#bo_v .ts-helpful-btn.is-mine i,
#bo_v .ts-helpful-btn.is-mine .ts-helpful-count { color: var(--brand); }

/*--------------------------------------------
  18. 댓글 액션 줄 — 참여(추천·답글)는 좌측, 관리(수정·삭제·신고)는 우측
  기존: ul 하나를 float-right 로 통째로 우측에 붙였다.
--------------------------------------------*/
#bo_v .cmt-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 답글·좋아요를 좌측에 모아 배치 */
  gap: 12px;
}
#bo_v .cmt-btn .cmt-action-list--right {
  margin-left: 0;   /* 좋아요 우측에 바로 붙인다 (좋아요 · 답글 순) */
  padding-left: 12px;
  position: relative;
}
/* 좋아요↔답글 약한 세로 구분선 — 버튼 높이 전체가 아니라 짧게(12px) 중앙에 */
#bo_v .cmt-btn .cmt-action-list--right::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--line);   /* --line-soft → --line 한 단계 진하게 */
}
/* 답글 폰트 — 좋아요 숫자와 동일한 13px.
   (같은 특이도의 .cmt-action-list--text a 규칙이 이 뒤 규칙에 덮이던 문제 → 여기서 최종 지정) */
#bo_v .cmt-action-list a {
  font-size: 13px;
  font-weight: 400;   /* 500 → 400 한 단계 낮춤 */
}
/* 참여 액션(좋아요·답글)을 댓글 내용과 같은 기준선에 맞춘다.
   구 주석은 .cmt-wrap.cmt-chat 에 padding-left:58px 이 있다고 전제했는데 그 값은 이제 0 이라,
   px-3 만 걷으면 버튼이 아바타 영역에서 시작했다. 들여쓰기를 여기서 직접 준다
   — 44px = 아바타(35px) + 간격, 헤더·.cmt-content 와 같은 값. 우측 4px 도 동일 기준선. */
#bo_v .comment-card .cmt-wrap.cmt-chat .cmt-btn {
  padding-left: calc(var(--cmt-inset) + 44px) !important;
  margin-left: 0;
  padding-right: calc(var(--cmt-inset) + 4px) !important;
}
/* 부트스트랩 캐럿 중복 제거 (마크업에 fa-caret-down 이 이미 있다) */
#bo_v .pv-cmt-tools #cmt_sort.dropdown-toggle::after {
  display: none;
}

/*--------------------------------------------
  21. 댓글 페이징 — 목록 페이징(list.css .fb-pagination)과 동일 규격
  부트스트랩 기본은 rem 패딩이라 PC/모바일에서 값이 갈린다 → px 로 고정.
--------------------------------------------*/
#viewcomment .pagination .page-link {
  font-size: 13px;
  padding: 7px 12px 5px; /* 상하 비대칭은 의도 — Oxanium 글리프 보정 */
}
#viewcomment .pagination .page-link:focus { box-shadow: none; } /* BS4 기본 .2rem 포커스 링 — 클릭 순간 띠 잔상 제거 */
#viewcomment .pagination .page-link:focus-visible { box-shadow: 0 0 0 2px var(--brand-soft); } /* 키보드 포커스만 유지 (토큰은 전역 tokens.css) */