@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;
  /* 카드 아래 여백은 두지 않는다 — 뒤에 형제가 없어 꼬리 여백이 되고,
     .row 가 flex 라 상쇄되지 않아 푸터 위 40px 에 그대로 더해졌다 [2026-08-22] */
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  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;
  /* 아래 여백 0 — 메타 줄의 margin-top(§5 4px)이 이 자리의 간격을 단독으로 갖는다.
     제목 2줄 글에서 우측 컬럼이 썸네일보다 길어지는 몫을 여기부터 조금씩 걷어냈다(§2-1 주석). */
  margin-bottom: 0;
}
#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: stretch;      /* 두 컬럼을 같은 높이로 — 우측이 짧을 때(제목 1줄) 정보표가 흡수할
                                여백이 여기서 생긴다(.bo-v-info flex:1 1 auto). 구 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 가 담당(썸네일 생성함수 호출 없음, 토토와 동일 방식).
   비율(4/3)과 크기를 고수한다: flex:0 0 auto 라 우측 텍스트 칸이 길어져도 늘어나지 않는다.
   ▶ 이 자리에서 시도했다가 되돌린 것 2가지 —
     ① flex:1 1 auto (우측 길이만큼 썸네일을 늘려 바닥 정렬): cover 크롭이 커져 목록 카드와
        다른 구도가 된다. 비율·크기 유지가 우선이라 폐기.
     ② 우측에 max-height 상한 (여백을 줄여 바닥 정렬): 정보표 행이 얇아져 구분선이 값에 붙는다.
     → 제목 2줄이면 우측이 썸네일보다 제목 한 줄만큼 길어지는데, 셋(비율 고정 / 바닥 정렬 /
       정보표 여백 유지) 중 둘까지만 가능하다. 현재 선택은 '비율 고정 + 여백 유지'다. */
.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: var(--r-10);
  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);
}
/* 대표이미지 없는 글 — 목록 카드와 같은 플레이스홀더 박스(클래스·토큰은 event.css .sbe-thumb--ph).
   센터링을 여기에 두는 이유: 목록 쪽 .sbe-thumb 는 자신이 flex 컨테이너라 아이콘이 저절로 가운데
   서지만, 히어로 썸네일은 이미지를 absolute 로 깔아 두는 구조라 그 정렬이 없다.
   토큰에 리터럴 폴백을 붙인 건 event.css 가 조건부 로드($sbe_cfg 있을 때만)라서다 —
   이벤트 설정이 없는 글에서도 회색 박스와 아이콘이 제 색으로 나와야 한다. */
.bo-v-hero__thumb.sbe-thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sbe-ph-bg, #f4f4f4);
}
.bo-v-hero__thumb .sbe-thumb__ic {
  font-size: 2.4rem;
  color: var(--sbe-ph-ink, rgba(15, 23, 42, .22));
}
.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} 가 같은 역할)
   ▶ 높이 예산 — 제목 1줄이면 이 표가 남는 높이를 먹어 바닥이 저절로 맞는다(flex:1 1 auto).
     제목 2줄이면 반대로 우측이 제목 한 줄분(약 30px) 길어지므로, 그만큼을 고정 여백에서
     미리 걷어내 뒀다: 제목 아래 1.6→0 / 날짜 위 8→4 / 표 위 14→8 / 칸 상하 14→9 / 라벨-값 5→4.
     칸 여백을 0 으로 만들면 구분선이 값에 붙으므로(전례) 9px 는 남긴다.
     1줄 글에서는 걷어낸 만큼 행이 더 늘어나 화면상 변화가 없다.
   2×2 그리드 — 라벨 열을 두지 않고 칸마다 라벨(위)+값(아래)을 쌓는다. 값이 4개뿐이라
   4행 표는 세로로 길기만 했고, 마크업 순서가 곧 읽는 순서(좌→우, 위→아래)가 된다. */
.bo-v-info {
  margin-top: 8px;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 줄(grid row)은 auto 행 기본값대로 남는 세로 공간을 나눠 늘어난다 — 아랫줄 바닥이 좌측
     썸네일 바닥과 맞고(그 여백은 .bo-v-hero align-items:stretch 가 만든다),
     구분선도 늘어난 줄의 실제 경계에 놓인다.
     카드 아님 — 사방 테두리·라운드 없이 가로선만: 위 1줄 + 첫 줄 아래 1줄이고,
     아랫줄 밑은 히어로가 여기서 끝나므로 선으로 닫지 않는다. */
  border-top: 1px solid var(--line-2);
}
/* 가로 여백은 column-gap 이 아니라 칸 padding 이 만든다 — 좌측 열이 제목 축에 서야 해서
   컨테이너 padding 으로는 못 주고, gap 을 쓰면 아래 구분선이 두 칸 사이에서 끊긴다. */
.bo-v-info__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  padding: 9px 14px 9px 0;
}
.bo-v-info__cell:nth-child(2n) { padding-left: 14px; }  /* 우측 열만 좌측 여백 — 좌측 열은 제목과 같은 축에 선다 */
/* 첫 줄(지급 포인트·종료까지) 아래에만 구분선. 두 칸에 각각 걸어야 열 경계에서 끊기지 않고 한 줄로 이어진다. */
.bo-v-info__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
.bo-v-info__label {
  font-size: 14px;
  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__val {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
/* 수치와 단위 사이 1px — 스킨 공통 규약(event.css .sbe-num 주석의 목록 참조).
   숫자 b 하나가 이 간격을 소유한다(포인트 P·인원 명 공통). 구 3px 은 수치와 단위가 따로 놀았다. */
.bo-v-info__val b { font-weight: 700; margin-right: 1px; }
/* 지급 포인트 — 브랜드 강조 (숫자 폰트는 §10 에서 일괄) */
.bo-v-info__point { font-size: 24px; font-weight: 700; color: var(--brand); }
/* 보조 설명(/ N명 지급) — em 이지만 기울임 해제 */
.bo-v-info__sub { font-style: normal; font-size: 14.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__thumb          { order: 1; }
  .bo-v-hero .bo-v-titlerow  { order: 2; }
  .bo-v-hero .post-meta-list { order: 3; }
  /* 세로 스택에선 블록 사이 간격을 .bo-v-hero 의 gap(12px) 하나가 갖는다 — 아래 .bo-v-info 의
     margin-top:0 과 같은 이유다. 이 두 줄이 없으면 제목 아래만 gap 에 h1 기본 아래여백(8px)과
     메타 줄 margin-top(4px)이 더해져 제목 위(12px)의 두 배로 벌어진다. */
  .bo-v-hero #bo_v_title     { margin-bottom: 0; }
  .bo-v-hero .post-meta-list { margin-top: 0; }
  /* 구 flex:0 0 auto 재선언 제거 — 데스크톱 기본값이 이미 0 0 auto 라 중복이었다 */
  .bo-v-info        { order: 4; margin-top: 0; flex: 0 0 auto; }
  /* 세로 스택이라 늘어날 여백(행 stretch)이 없다 — 데스크톱에서 제목 2줄 대응으로 걷어낸
     칸 여백(9px)을 여기서는 되돌린다. 맞출 썸네일이 옆에 없으니 줄일 이유도 없다. */
  .bo-v-info__cell  { padding-top: 12px; padding-bottom: 12px; }
}

/*--------------------------------------------
  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: 4px 0 0;   /* 구 8px — 제목 2줄 대응으로 축소(§2-1 '높이 예산' 주석) */
  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;
}

/* 게시글 메타 — 이 게시판은 쓰기등급 10(운영자 전용)이라 작성자 표기를 하지 않는다.
   아바타·레벨아이콘·닉네임 규칙(.pv-author / __avatar / __meta / __name-row / __name)은
   참조하는 마크업이 사라져 함께 제거했다. 등록일과 IP만 남는다. */
/* 등록일. 통계(.pv-stats)는 별도 li 지만 **같은 줄·같은 정보 티어**라 색·굵기를 §12 와 같은 값으로 맞춘다
   [2026-08-23 사용자 확인]. 구 값(--sub #676D76 / 굵기 400)은 통계가 한 톤 내려가면서 혼자 진하게 남았다.
   굵기는 통계와 함께 500 → 400 으로 다시 낮췄다(같은 날, 사용자 지정).
   ⚠ 색·굵기를 바꿀 땐 §12 통계와 **함께** 바꾼다 — 한쪽만 고치면 한 줄 안에서 다시 갈린다.
   시계 아이콘은 이 선언을 상속하므로(아래 i 규칙에 color 없음) 자동으로 같이 따라온다. */
/* line-height 1.2 는 통계 칸(§12 .pv-stats)과 같은 값이다 [2026-08-23].
   미선언이면 body 의 1.8 을 받아 이 칸만 25.2px(통계는 16.8px)이 되고, 줄 높이를 날짜가 혼자 8.4px 키웠다.
   기준선은 두 칸이 각자 중앙정렬돼 우연히 맞았지만, 한쪽 글자크기만 바뀌면 즉시 어긋나는 구조였다.
   ⚠ 통계의 line-height 와 한 쌍이다 — 한쪽만 고치지 말 것. */
.post-meta-list .pv-author__date { display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; line-height: 1.2; font-weight: 400; color: var(--muted); }
/* 시계 아이콘 [2026-08-23 · 이 보드만 시범 적용 — view.skin.php 주석 참조].
   크기는 같은 줄 통계 아이콘(§12 .pv-stats i)과 같은 14px.
   세로 보정 -0.77px — fa-clock-o 잉크 세로중심 640 유닛(TTF 실측)을 숫자(Oxanium) 잉크 중심에
   맞춘 값이다. 산출식과 측정 주의사항(SVG 폰트로 재면 안 되는 이유)은 §12 주석 참조.
   색은 선언하지 않는다 — 부모(.pv-author__date)의 --muted 를 그대로 물려받아 날짜 글자·통계와 같은 톤이 된다. */
.post-meta-list .pv-author__date i {
  font-size: 1rem;
  line-height: 1;
  position: relative;
  top: -0.77px;
}
/* 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;
  /* 자동 줄바꿈 — 입력칸 끝에 닿으면 아랫줄로 내려간다(높이는 JS 가 따라 늘린다).
     overflow-wrap: 띄어쓰기 없이 이어지는 긴 문자열도 끊어서 다음 줄로 넘긴다.
     min-width: flex 아이템의 기본값 auto 는 '내용의 최소폭' 아래로 못 줄어든다 →
       긴 글이 입력칸을 밀어 옆의 전송 버튼을 화면 밖으로 내보낸다. 0 으로 풀어준다. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 댓글 입력칸: 알약형(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;
}
/* ===== 모바일 댓글 입력창 가로 확장 (2026-08-18, 자유게시판 계열과 동일 규격) =====
   PC 는 88% 유지 — 본문 폭 대비 여백이 있어야 입력줄이 문단과 구분된다.
   모바일은 섹션 좌우 여백(#viewcomment 의 px-3 = 14px)을 12px 씩 회수한다.
   남긴 2px 은 알약의 둥근 모서리가 화면 끝에 물려 잘려 보이지 않게 하는 최소치. */
@media (max-width: 575px) {
  .cmt-box .cmt-compose {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }
  /* 알약 안쪽: 좌측 4px 회수 + 2줄 구성이 되면서 위아래 여백 확보(PC 는 2px 유지). */
  .cmt-box .cmt-input-wrap { padding: 6px 8px 6px 12px; }
  /* 이모티콘 버튼은 모바일에서 숨긴다 — 휴대폰 키보드가 이미 이모지를 제공해 기능이 중복이고,
     좁은 입력줄에서 글자 자리만 잡아먹는다. 사진 첨부는 키보드에 대응물이 없어 남긴다.
     글쓰기 화면의 같은 버튼은 대상이 아니다 — .cmt-input-line 안으로만 한정한다. */
  .cmt-box .cmt-input-line .btn_comment[title="이모티콘"] { display: none; }
  #bo_v .bo_vc_re:not(:empty) .cmt-compose {
    width: calc(100% - 4px);
    margin-left: 16px;
    margin-right: -12px;
  }
}
/* 입력칸 한 줄: 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-6);
  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); }

/* ===== 모바일 댓글 입력줄: 2줄 구성 (2026-08-18, 자유게시판 계열과 동일) =====
   ⚠ 이 블록은 반드시 위 .cmt-input-line / #wr_content / #btn_submit 기본 규칙 '뒤'에 온다.
     미디어쿼리는 특이도를 올려주지 않으므로, 앞에 두면 같은 특이도의 기본값(flex:1 1 auto,
     max-width:0 …)이 순서로 이겨 아무 것도 적용되지 않는다.
   1줄 = 입력칸(전폭) / 구분선 / 2줄 = 사진첨부 · 전송(우측 정렬). */
@media (max-width: 575px) {
  .cmt-box .cmt-input-line { flex-wrap: wrap; row-gap: 2px; }
  /* 입력칸이 1줄을 통째로 쓴다 — flex-basis 100% 라 뒤 항목은 자동으로 다음 줄로 넘어간다. */
  .cmt-box .cmt-input-line #wr_content { flex: 1 1 100%; order: 1; }
  /* 입력 영역과 버튼 줄을 가르는 구분선.
     ::before 를 '전폭 1px 짜리 flex 아이템'으로 만들어 두 줄 사이에 끼운다.
     textarea 에 border-bottom 을 주는 방법은 못 쓴다 — 기본 규칙이 border·box-shadow 를
     none !important 로 못박아 두었고(포커스 링 제거용), !important 로 다시 이기면
     특이도 싸움만 남는다. 여기선 순서(order)만으로 해결된다. */
  .cmt-box .cmt-input-line::before {
    content: "";
    order: 2;
    flex: 1 1 100%;
    height: 1px;
    margin: 4px 0 2px;
    background: var(--line-soft);
  }
  /* 2줄: 사진첨부 · 전송 순으로 함께 우측 정렬 — 앞쪽 여백을 auto 가 전부 먹는다. */
  .cmt-box .cmt-input-line .cmt-tools { order: 3; margin-left: auto; }
  /* 전송 버튼은 모바일에서 항상 보인다 — 전용 줄에 자리가 고정돼 있어 접었다 펴면 줄이 흔들린다.
     입력 전에는 '비활성' 모습(옅은 회색·클릭 불가), 글자가 들어오면 활성색으로 바뀐다.
     크기·여백을 .has-text 와 같은 값으로 맞춰, 글자를 넣어도 버튼이 튀지 않는다.
     PC 는 그대로 — 한 줄 안에서 글자 자리를 아껴야 하므로 접힌 채 있다가 펼쳐진다. */
  .cmt-box .cmt-input-line #btn_submit {
    order: 4;
    max-width: 96px;
    opacity: 1;
    transform: none;
    margin-left: 6px;
    padding: 0 14px !important;
    background: var(--line-2) !important;
    color: var(--muted) !important;
    pointer-events: none;
  }
  /* 활성 — 색 되돌리기는 여기서 해야 한다. 위 .has-text 기본 규칙은 크기·여백만 다루고
     background·color 를 아예 선언하지 않아, 바로 위 비활성 규칙이 그대로 남는다. */
  .cmt-box .cmt-compose.has-text #btn_submit {
    background: var(--fb-btn-dark) !important;
    color: #fff !important;
    pointer-events: auto;
  }
}
.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-6);
  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 폴백
  (작성일, 댓글 날짜·추천수) — 통계 줄(조회·댓글·추천)은 §12 가 칸째 갖는다(정본과 동일)
  본문 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-6);
  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-6);
  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;
}
/* 북마크(보관함) — 박스(36px·테두리·라운드·hover)는 위 .bo-v-actions > .btn 이 담당한다.
   ⚠ 값을 여기 복사하지 말 것 — 박스 규격은 형제 규칙 한 곳이 정본이다.
     (구 주석은 테마 .sbc-site-main .btn{border-radius:10px !important} 를 근거로 들었는데
      그 전역 규칙은 현재 존재하지 않는다 — 2026-08-16 전수검색 0건. 지침 자체는 유효.)
   ⚠ fill 은 두 줄 모두 필요하다 — 활성 쪽만 두면 '보관됨'으로 들어와 해제할 때 svg 의 fill 속성이 남아
     회색 꽉찬 북마크가 된다(사유는 totolist view-detail.css 같은 자리 주석 참조). */
.bo-v-actions > .bo-v-bookmark.is-active {
  border-color: var(--brand);
  color: var(--brand);
}
.bo-v-bookmark svg { display: block; fill: none; }
.bo-v-bookmark.is-active svg { fill: currentColor; }
/* 부트스트랩 포커스 링·캐럿 제거 — 아이콘만 남긴다 */
.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 스코프에 걸리지 않는다.
  → 크기·색·굵기·숫자폰트를 여기서 선언한다(이 블록이 통계 스타일의 소유자).

  ⚠ **색·크기·굵기·아이콘 보정은 커뮤니티(free-community/style.css §12)가 정본**이고
    업체이벤트(.bev-stats)·베팅지식과 한 벌이다 — 한쪽만 고치지 말 것 [2026-08-23 4보드 통일].
    색은 통일 직후 --sub 였다가 같은 날 한 톤 내려 --muted 로, 굵기도 500 → 400 으로 확정(사용자 지정).

  배치는 정본과 같은 '날짜(좌) — 통계(우, ml-auto)' 다 [2026-08-23 사용자 확정].
    ⚠ 구 '등록일 | 조회 | 댓글' 한 줄(gap 10px + '|' 구분선 --line-2)은 폐기 — 되살리지 말 것.
      우측으로 떼어내면 통계 덩어리 앞에 구분선 하나가 홀로 남는다.
    ⚠ align-self:flex-end 만은 정본에서 빼고 가져온다 — 아래 주석 참조.
--------------------------------------------*/
.post-meta-list .pv-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;   /* 정본(커뮤니티)과 같은 값. 구 10px 은 '|' 구분선 여백(6px)과 짝이던 값이라 함께 폐기 */
  /* 숫자 굵기 400 [2026-08-23 사용자 지정 — 구 500 에서 낮춤]. 칸이 소유한다
     (안에 아이콘과 숫자뿐이라 칸에 걸어도 숫자에만 걸린 것과 같다).
     아래 .pv-stat b 는 inherit 로 이 값을 그대로 따른다. ⚠ 5보드 공통값. */
  font-weight: 400;
  /* ⚠ 정본(커뮤니티)의 align-self:flex-end 는 여기 두지 않는다 — 그쪽은 좌측이 「닉네임+날짜」 2줄이라
     통계를 아랫줄(날짜)에 맞추려고 쓰는 값이다. 이 보드는 좌측이 날짜 1줄뿐이라 flex-end 를 주면
     ul(align-items:center)이 잡은 줄의 바닥으로 통계만 내려앉아 날짜와 4px 어긋난다.
     날짜와 '|' 로 이어 붙는 배치라 특히 티가 난다. 정본에서 이 한 줄은 빼고 가져올 것 [2026-08-23]. */
  line-height: 1.2;
}
.post-meta-list .pv-stats .pv-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* 아이콘과 숫자가 갈라져 두 줄이 되는 것을 막는다 (업체이벤트 .bev-stat 과 같은 이유) */
  white-space: nowrap;
  /* 숫자 13px [2026-08-23 사용자 지정 · 14 → 13 → 12 → 13 으로 확정]. 아이콘은 14px 그대로다(.pv-stats i).
     px 리터럴을 쓰는 이유: 13/14rem 은 읽히지 않는 값이고, 폰트셋 6종이 모두 html{font-size:14px}
     이라 rem 기준이 흔들리지 않는다.
     ⚠ 이 보드 전용이다 — 커뮤니티·베팅지식·업체이벤트는 14px 그대로 두기로 했다(사용자 지정).
     ⚠ 크기를 바꾸면 칸 높이(=크기×1.2)가 바뀌어 아래 글리프 보정표가 어긋난다 — 함께 재계산할 것. */
  font-size: 13px;
  /* 카운트 티어 — 토큰 사다리에서 날짜(.pv-author__date, --sub)보다 **한 단계 아래**다
     [2026-08-23 한 톤 다운, 사용자 지정]. tokens.css 의 --muted 설명("흐린 라벨")이 이 자리다.
     ⚠ 5보드 공통값(정본 = 커뮤니티) — 한쪽만 고치지 말 것.
       날짜를 같은 톤으로 내리려면 §5 의 .pv-author__date 도 함께 내린다(지금은 --sub 유지). */
  color: var(--muted);
  /* 정본과 같이 칸 전체에 건다. 낭독용 한글(.sr-only)은 position:absolute 라 줄 상자 밖이고,
     아이콘 기준선은 아래 -1px 보정이 맡는다(정본이 쓰는 그 방식). */
  font-family: 'Oxanium', 'Paperozi', sans-serif;
}
/* <b> 의 UA 기본값은 bolder(=부모 500 이면 700 으로 올라간다) — 칸의 500 을 그대로 따르게 고정.
   굵기 소유자는 위 .pv-stats 한 곳이다(업체이벤트 .bev-stat b 와 같은 처리). */
.post-meta-list .pv-stats .pv-stat b { font-weight: inherit; }
.post-meta-list .pv-stats i {
  font-size: 1rem;   /* 아이콘은 14px 유지 — 줄인 건 숫자뿐이다(2026-08-23 사용자 확정) */
  line-height: 1;
  /* 아이콘은 숫자(--muted)보다 **두 단계** 아래 [2026-08-23 사용자 지정 · 한 톤 더 낮춤].
     토큰 사다리: --sub #676D76 → --muted #8A9099(숫자) → --muted-2 #9AA0A8 → --muted-3 #AAB0B8(아이콘).
     라벨 역할이라 숫자보다 물러나 있어야 숫자가 먼저 읽힌다.
     ⚠ --muted-3 은 이 자리를 위해 신설한 토큰이다(tokens.css 텍스트 사다리 최하단, 13보드 사본 동기화 완료).
       장식 아이콘 전용 — 흰 배경 대비 2.2:1 이라 **텍스트 단독으로는 쓰지 말 것**(숫자가 값을 들고 있고
       아이콘은 aria-hidden 이라 접근성상 문제 없다).
     ⚠ 5보드 공통값 — 업체이벤트는 .bev-stat .fa 쪽에 같은 처리가 있다. */
  color: var(--muted-3);
  position: relative;    /* 아래 글리프별 top 보정의 기준 */
}
/* 글리프별 세로 보정 [2026-08-23 · TTF 실측].
   FA4 아이콘은 글리프마다 잉크가 그려진 높이가 다르다. 잉크 세로중심(upm 1792):
     eye 576 · commenting-o 512 · thumbs-o-up 704 · thumbs-o-down 576 · thumbs-up 640 · thumbs-down 512
   → 최대 192 유닛(1.5px) 벌어져 있어 일괄 보정으로는 못 맞춘다.
   숫자(Oxanium-400, 0-9 잉크 0~690 / upm 1000 → 중심 345u = 1792 환산 618)의 잉크 중심에 맞춘 값이다.
   칸이 align-items:center(베이스라인 정렬 아님)라 박스 메트릭까지 넣어 계산했다:
     칸 높이 15.6px(=13×1.2) · 아이콘 박스 **14px**(줄인 건 숫자뿐) 중앙정렬 → 아이콘 baseline 12.8px · 숫자 잉크중심 7.085px
     → top = 잉크중심(u)/1792×14 − 5.715   [2026-08-23 숫자 13px·아이콘 14px 유지 기준으로 재계산]
   ⚠ 측정은 반드시 **TTF + fontTools** 로 한다(js/font-awesome/fonts/fontawesome-webfont.ttf).
     SVG 폰트(fontawesome-webfont.svg)의 d 속성은 상대좌표 명령(h·l·q·v·t)이라 원시 숫자의 min/max 를
     잡으면 잉크 위치가 아니다 — 그 방식으로 잰 구 보정표(eye -1.46 / commenting-o -0.53 / thumbs-o-up +1.10 …)는
     댓글 아이콘이 1.24px 내려앉아 폐기됐다. 그때 덧댔던 '+2px 육안 보정'도 그 오차를 상쇄하려던 것이라 함께 폐기.
   ⚠ 폰트(FA 버전·숫자폰트)나 이 줄의 font-size/line-height 를 바꾸면 이 표는 무효다 — 다시 계산할 것.
   ⚠ 5보드 공통값 — 업체이벤트는 .bev-stat 쪽에 같은 표가 있다. */
.post-meta-list .pv-stats .fa-eye           { top: -1.21px; }
.post-meta-list .pv-stats .fa-commenting-o  { top: -1.32px; }
.post-meta-list .pv-stats .fa-thumbs-o-up   { top: -0.21px; }
.post-meta-list .pv-stats .fa-thumbs-o-down { top: -1.21px; }
.post-meta-list .pv-stats .fa-thumbs-up     { top: -0.71px; }
.post-meta-list .pv-stats .fa-thumbs-down   { top: -1.71px; }

/* 모바일은 14px 유지 [2026-08-23 사용자 지정] — 13px 축소는 PC 전용이다.
   좁은 화면에선 이 줄이 유일한 보조정보라 13px 이면 눌려 읽힌다.
   경계 575px 은 이 스킨의 모바일 티어(#bo_v 여백·댓글 입력 스택과 같은 값).
   ⚠ 반드시 위 본체 규칙·보정표보다 **뒤에** 둘 것 — 같은 특이도라 순서로 이긴다.
     (처음엔 앞에 넣어 모바일 유지가 통째로 무효였다. 2026-08-23 수정.)
   ⚠ 보정값은 13px 기준을 그대로 쓴다 — 14px 기하와의 차이가 최대 0.06px 로 서브픽셀이다.
   ⚠ 이 보드 전용이다. 커뮤니티·베팅지식·업체이벤트는 14px 그대로 두기로 했다(사용자 지정). */
@media (max-width: 575px) {
  .post-meta-list .pv-stats .pv-stat { font-size: 1rem; }   /* 아이콘은 PC·모바일 모두 14px 라 여기 없다 */
}


/*--------------------------------------------
  13. 본문 폭 — 상세·작성폼 모두 900px (전 게시판 공통값, 2026-08-22 통일)
  상단바(.bo-v-topbar)와 본문 카드(#bo_v)는 .col-12.na-col 안의 형제 노드다.
  둘 다 같은 폭으로 묶어야 좌우 끝이 맞는다.
  ⚠ 작성폼(#bo_w)은 2026-08-19~08-22 사이 업체이벤트에 맞춘 832px 였다 — 그 예외는 폐기했다.
    (#bo_v/#bo_w 둘 다 좌우 패딩이 없어 선언값이 곧 카드 border-box 실폭)
--------------------------------------------*/
.bo-v-topbar,
#bo_v,
#bo_w {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------
  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 제거 — 카드 첫 섹션인 히어로가 이미 자기 상단 패딩(var(--fb-pad))을 갖는다.
       여기에 14px 을 더 얹으면 썸네일 위만 14+14=28px, 좌우는 14px 이 되어 두 배로 벌어졌다
       (데스크톱은 #bo_v padding-top:0 이라 원래 좌우와 같았다 — 모바일에서만 어긋난 값). */
    padding-bottom: 14px;   /* 이쪽은 유지 — 마지막 섹션(#viewcomment)이 하단 패딩을 14px 깎아
                               쓰므로(§14) 그 몫을 카드가 되돌려 줘야 최종 여백이 --fb-pad 가 된다 */
  }
}

/* 흰 면을 화면 좌우 끝까지 — 목록·업체 상세와 같은 처리(DESIGN_SYSTEM §9.2).
   업체 상세(.vd-panelcard)는 이미 띠였지만 여기는 라운드 카드였다 → 좌우 테두리·라운드를 걷고
   #nt_body 거터를 음수 마진으로 상쇄한다. 거터 값의 주인은 custom-sidebar.css 의 --page-gutter.
   --fb-pad 는 본문·메타·댓글이 함께 보는 가로 여백 단일 소스라, 여기 한 줄로 안쪽이 전부 따라온다.
   14px = 거터 12 + 2 → 목록 행·업체 상세와 같은 좌측 선.
   ⚠ 위 @media(max-width:600px) 보다 뒤에 와야 한다(같은 #bo_v 특이도 — 순서로 이긴다). */
@media (max-width: 575px) {
  #bo_v {
    --fb-pad: 14px;
    margin-left: calc(-1 * var(--page-gutter,12px));
    margin-right: calc(-1 * var(--page-gutter,12px));
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

/* 제목 자체 좌우 패딩(위 #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 b {
  /* 「댓글」과 숫자 사이 간격 — 부모가 display:inline-flex 라 마크업의 공백 문자가
     렌더되지 않는다(플렉스 항목 사이엔 공백이 생기지 않음). 그래서 '댓글300' 처럼 붙어 보였다.
     바로 아래 .pv-cmt-page 가 같은 이유로 margin-left:4px 를 갖고 있어 값을 맞춘다.
     ⚠ 부모에 gap 을 주면 .pv-cmt-page 의 4px 과 이중으로 더해진다 — 여기만 준다. */
  margin-left: 4px;
}
#bo_v .pv-cmt-head .float-left {
  font-size: calc(1rem + 1px);
  font-weight: 600;
  /* 숫자 폰트 — 「댓글 300 / 12 페이지」의 숫자만 Oxanium 이 된다.
     한글은 --font-num 의 2순위 Paperozi 로 폴백되는데 그게 곧 본문 폰트(--font-ui 1순위)라
     한글 모양은 지금과 완전히 동일하다. 혼합 문구에 그대로 거는 방식은 같은 스킨의
     .be-card-meta 등이 이미 쓰는 관용구다. 자식(b · .pv-cmt-page)은 상속으로 따라온다. */
  font-family: var(--font-num);
}
/* 다크 — 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-6);
  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) */

/*--------------------------------------------
  하단 안내 콘텐츠 (.fb-guide) — 2026-08-14 신설
  기본 규칙은 free-community/style.css 의 같은 블록 미러링.
  체크리스트 카드(-grid/-txt/-item/-sub)는 totolist 의 .sbc-cl__guidebox-* 를 이름만 바꿔 옮겼다.
  ⚠ list.css 는 free-community·betting-tips·sbc_event 3보드 byte-identical 공유본이라 금지.
     style.css 는 이 보드 전용이다. 한쪽을 고치면 나머지 보드도 함께 볼 것(자동 동기화 아님).
--------------------------------------------*/
/* 하단 안내는 카드 면을 갖지 않는다 (2026-08-17) — 목록을 보조하는 설명글이지 데이터 면이 아니다.
   흰 카드로 두면 바로 위 목록 카드(.fb-wrap)와 면이 경쟁한다.
   좌우 20px 은 유지 — 목록(.fb-post-list 20px)과 같은 좌측 선.
   모바일 구분선은 ≤575px 블록이 따로 얹는다(면이 없어 경계가 사라지는 폭). */
.fb-guide {
  margin-top: 16px;
  /* 아래는 0 — 배경·테두리 없는 투명 블록이라 그 20px 이 카드 안쪽이 아니라 빈 공간이 되어
     화면 하단 여백(#nt_body)에 합산된다. 진짜 카드인 muktui 는 20px 유지 [2026-08-22] */
  padding: 20px 20px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.fb-guide h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}
/* 홈 SEO 섹션·업체 3보드와 같은 세로바 — 색은 보드 브랜드 토큰 */
.fb-guide h2::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--brand);
}
/* 두 번째 H2 = 독립 주제 전환 */
.fb-guide h2:not(:first-child) {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.fb-guide p {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--body);
  line-height: 1.8;
}
.fb-guide a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fb-guide a:hover { color: var(--brand-hover); }
.fb-guide > :last-child { margin-bottom: 0; }

/* 체크리스트 카드 — totolist .sbc-cl__guidebox-* 와 같은 값 */
.fb-guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:10px; margin:0 0 14px; padding:0; list-style:none; }
.fb-guide-grid li { display:flex; align-items:flex-start; min-height:74px; padding:13px; border:1px solid var(--line); border-radius:var(--r-12); background:var(--card); }
/* 체크 글리프 — border 2변 + 45° 회전 (SVG 없이 브랜드 토큰 색 유지) */
.fb-guide-grid li::before { content:''; flex:0 0 auto; width:5px; height:9px; margin:4px 9px 0 2px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(45deg); }
.fb-guide-txt { min-width:0; }
.fb-guide-item { display:block; font-size:13.5px; font-weight:600; color:var(--sub); line-height:1.45; word-break:keep-all; }
.fb-guide-sub { display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--muted); line-height:1.45; word-break:keep-all; }

/* 다크모드 — 업체 3보드 하단 콘텐츠와 같은 값 */
html.dark-mode .fb-guide { background: transparent; }
html.dark-mode .fb-guide h2 { color: #E2E8F0; }
html.dark-mode .fb-guide p { color: #94A3B8; }
html.dark-mode .fb-guide h2:not(:first-child) { border-top-color: #334155; }
html.dark-mode .fb-guide a { color: #60A5FA; }
html.dark-mode .fb-guide-grid li { background:#1E293B; border-color:#334155; }
html.dark-mode .fb-guide-grid li::before { border-color:#60A5FA; }
html.dark-mode .fb-guide-item { color:#CBD5E1; }
html.dark-mode .fb-guide-sub { color:#8494A9; }

/* 모바일: 목록 래퍼와 같은 폭 규칙(테두리 없이 거터에 맞춤) + 한 단계 낮춘 타입 스케일 */
@media (max-width: 768px) {
  .fb-guide {
    padding-left: 0;
    padding-right: 0;
  }
  .fb-guide h2 { font-size: 17px; }
  .fb-guide p { font-size: 13.5px; }
  .fb-guide-grid { gap:8px; }
  .fb-guide-grid li { min-height:68px; padding:12px; }
  .fb-guide-item { font-size:13px; }
  .fb-guide-sub { font-size:11.5px; }
}

/* ≤575px 만 full-bleed — 이 폭에서만 .nt-container 가 px-0 이라 좌우 패딩이
   #nt_body 한 겹(--page-gutter)이고 음수 마진으로 정확히 상쇄된다(DESIGN_SYSTEM §9.2).
   576~768px 은 nt-container px-sm-4(24px)가 더 붙어 한 값으로 못 지우므로 위 블록의
   투명 처리를 그대로 둔다. 여기서 흰 면을 되살리는 건 업체 3보드 .sbc-cl__guidebox 와
   같은 형태로 맞추기 위함 — 목록 카드 면과 이어져 하나의 면으로 읽힌다.
   글자 14px 은 목록 행(.fb-row)과 같은 좌측 선. */
@media (max-width: 575px) {
	/* 면도 선도 없다 (§9.5) — .fb-wrap 흰 면의 아래 경계가 이미 구분을 만든다.
	   좌우 2px = 거터 12 + 2 → 화면 기준 14px 로 목록 행과 같은 좌측 선
	   (위 ≤768px 블록의 padding-left/right:0 을 덮는다). */
	.fb-guide {
		padding-left: 2px;
		padding-right: 2px;
	}
}

/* ===== 로그인·권한없음 안내 — .board-login-notice [공용 정본] =====
   댓글 11보드(toto·casino·etc·free-community·betting-tips·sbc_event·bizevent·
   predictlist·talent-market·job-recruit·muktui) + 목록 3보드(Attend·exchange·gifticon) 공통.
   14개 파일에 이 블록이 바이트 동일하게 복제된다 — 한 곳만 고치면 갈라진다(DESIGN_SYSTEM.md §9.4).
   납작한 회색 채움 + fa-info-circle, 테두리·그림자 없음. margin 은 각 스킨이 정한다.
   ⚠ 부트스트랩 .alert 계열을 붙이지 말 것 — theme/Nariya-A/css/custom-sidebar.css 의
     .sbc-site-main .alert 가 box-shadow 를, theme.css 의 .is-square .alert 가
     border-radius:0 을 !important 로 되살린다(이 통일 작업이 걷어낸 바로 그 레이어).
   ⚠ .f-de 도 붙이지 말 것 — 폰트셋 css(css/font/pc-*.css, mobile/mo-*.css)가
     font-size 를 15px(PC)/16px(모바일) !important 로 못박아 아래 13.5px 이 무시된다. */
.board-login-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px;
    background: var(--field-bg, #f4f4f4);
    border-radius: var(--r-10, 10px);
    color: var(--sub, #676D76);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
}
.board-login-notice i { flex: 0 0 auto; color: var(--brand, #2771E3); font-size: 16px; }
/* 문장 전체를 span 하나로 묶는다 — 맨몸 텍스트 노드는 익명 flex 아이템이 되어
   gap:8px 이 '로그인' 뒤 문장 중간에 끼어든다(구 .at-/.ex-/.gft- 판의 흠, 여기서 교정). */
.board-login-notice__txt { min-width: 0; }
.board-login-notice a {
    color: var(--brand, #2771E3);
    font-weight: 700;
    /* border-bottom 대신 text-decoration — flex 아이템 박스 높이와 무관하게 글자 기준선을 따라간다 */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
/* 다크모드 — 공유 tokens.css 에는 다크 오버라이드가 없다(tokens.css 헤더 명시). 리터럴로 준다. */
html.dark-mode .board-login-notice { background: #1f2937; color: #94a3b8; }
html.dark-mode .board-login-notice i,
html.dark-mode .board-login-notice a { color: #c7d3e1; }