@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. 분류 탭 (작성 화면)
--------------------------------------------*/
/* 업체이벤트 작성폼의 분류 칩(skin/board/bizevent/style.css `.be-chip`)과 **같은 규격**이다
   [2026-08-22 사용자 지시] — 높이 32px · 좌우 13px · 1px 테두리 · r-6 · 13px/600,
   선택된 탭만 브랜드 블루 채움(테두리도 같은 색) + 흰 글자.
   두 작성폼이 같은 손짓(분류 하나 고르기)을 같은 모양으로 받게 하는 게 목적이라,
   값을 바꿀 땐 bizevent 쪽도 함께 본다. CSS 를 공유하지 않는 이유는 스킨별 style.css 가
   각자 파일이기 때문(보드-특화 — 루트 CLAUDE.md 「공유 CSS」 항목).
   ⚠ 마크업은 라디오다 — 목록 분류탭(list.css §3)은 이동(<a> 링크)이지만 작성폼은 값 선택이라
     폼 요소여야 키보드 이동·submit 전송이 네이티브로 동작한다.
   ⚠ 구 규격은 <select class="form-control fb-ca-select"> + '미선택 시 자유' 안내문이었다
     [2026-08-22 탭 전환]. 되돌릴 땐 write.skin.php 의 분류 행과 이 블록을 함께 되돌린다. */
#bo_w .fb-ca-tabs {
  display: flex;
  flex-wrap: wrap;   /* 목록탭은 한 줄 가로스크롤(Sly)이지만, 폼에선 선택지가 접혀 보이면 안 된다 */
  gap: 6px;
}
/* margin:0 필수 — .fb-ca-tab 은 <label> 이라 부트스트랩 label{margin-bottom:.5rem} 를 그대로 먹는다
   (bizevent .be-chip 이 margin:0 을 갖는 것과 같은 이유). */
#bo_w .fb-ca-tab {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}
/* 라디오는 시각적으로만 숨긴다 — display:none 이면 키보드 포커스·화살표 이동이 사라진다 */
#bo_w .fb-ca-tab input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
#bo_w .fb-ca-tab span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-6);
  background: var(--card);
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* hover 는 업체이벤트에 없는 한 줄이다 — 폼 안에서 유일하게 '누르는' 요소라 손이 올라간 걸
   알려 주는 신호가 필요했다. 채움은 건드리지 않고 윤곽·글자만 진해진다(선택 상태와 안 헷갈리게). */
#bo_w .fb-ca-tab:hover span {
  border-color: var(--line-strong);
  color: var(--ink);
}
#bo_w .fb-ca-tab input:checked + span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* 켜진 탭엔 hover 윤곽을 얹지 않는다 — 위 :hover 규칙과 특이도가 같아 뒤에 와야 이긴다 */
#bo_w .fb-ca-tab:hover input:checked + span {
  border-color: var(--brand);
  color: #fff;
}
/* 포커스 링은 키보드에서만 — 라디오 자체가 안 보이므로 링이 없으면 지금 어디에 있는지 알 수 없다 */
#bo_w .fb-ca-tab input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/*--------------------------------------------
  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
--------------------------------------------*/
#bo_v_title {
  background: none;
  background-color: var(--card);
  color: var(--ink);
  font-weight: 700;
  padding: 0.15rem 1.25rem 0.1rem;
  margin-bottom: 0.1rem;
  border-radius: var(--r-6);
}

/* 타이포그래피 오버라이드 (폰트테마 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; }

/*--------------------------------------------
  3. Content Area
--------------------------------------------*/
#bo_v_con {
  color: var(--body);
  padding: 1.5rem;
  margin: 1rem 0;
  /* min-height:200px(나리야 BS4-Basic-List 원본 상속) 제거 [2026-09-03 사용자 지정] —
     한 줄짜리 글도 본문 박스가 200px 로 늘어나 줄바꿈도 없는데 넓고 나눠져 보였다(notice/29). 높이는 내용이 정한다. */
  word-break: break-word;
  overflow: hidden;
}

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

#bo_v_info {
  font-size: 0.9rem;
  color: var(--muted);
}

/*--------------------------------------------
  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 {
  background-color: var(--card);
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--sub);
}

.post-meta-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.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;
}

/* 게시글 작성자: 프로필사진 아래 레벨아이콘 (댓글/채팅과 동일 비율 38px·28px) */
.post-meta-list .pv-author { display: inline-flex; align-items: center; gap: 10px; }
.post-meta-list .pv-author__avatar {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; flex-shrink: 0; padding-bottom: 5px; width: 38px; line-height: 0;
}
/* 닉네임(크게) + (작성일자·조회수·댓글수·추천수) 세로 스택 — 아바타 높이만큼 채움 */
.post-meta-list .pv-author__meta { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; line-height: 1.2; margin-top: 9px; }
/* 닉네임 줄만 위로 (날짜/조회 줄은 원위치 유지: 위로 올린 만큼 아래로 보정) */
.post-meta-list .pv-author__name-row { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: -2px; margin-bottom: 2px; }
/* 닉네임 — weight 500 / --ink 는 토토 후기(.ts-review-author)·리스트·댓글 닉네임과 동일.
   크기만 15px 로 한 단계 키운다: 상세 상단바의 글쓴이는 그 페이지의 주체라
   목록에서 훑는 닉네임(14px)보다 강조한다. 15 = 규약 "강조 본문" 스텝(DESIGN_SYSTEM.md §2).
   이전의 1.12rem 은 폰트테마 html{font-size:14px}(pc-Paperozi.css:11) 기준으로
   15.68px 이 되어 스케일에 없는 값이었다.
   .sv_member 는 <a> 라 부모 color 를 상속하지 않아 색을 직접 지정해야 한다. */
.post-meta-list .pv-author__name { font-size: 15px; font-weight: 500; color: var(--ink); }
.post-meta-list .pv-author__name .sv_member { font-size: 15px; font-weight: 500; color: var(--ink) !important; }
.post-meta-list .pv-author__ip { font-size: 1rem; font-weight: 400; color: var(--muted-2); }
/* 날짜 줄. 통계(.pv-stats)는 우측으로 분리돼 여기 없다 — 색은 §12 에서 같은 --sub 로 맞춘다. */
.post-meta-list .pv-author__sub { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 1rem; font-weight: 400; color: var(--sub); }
/* 날짜 색은 같은 줄 통계(§12 .pv-stat)와 같은 --muted 다 [2026-08-23 사용자 지정].
   구 --sub(#676D76)는 통계가 한 톤 내려간 뒤 날짜만 진하게 남아 한 줄 안에서 톤이 갈렸다.
   ⚠ 승부처이벤트(sbc_event/style.css §5 .pv-author__date)와 같은 값이다 — 한쪽만 고치지 말 것.
   ⚠ 베팅지식(betting-tips)은 같은 판이지만 이번 범위 밖이라 --sub 그대로다(사용자 지정).
   ⚠ 부모 .pv-author__sub 는 --sub 를 유지한다 — 그 안엔 이 날짜뿐이라 화면에 드러나지 않지만,
     나중에 형제 요소를 추가하면 톤이 갈리니 그때 함께 볼 것. */
.post-meta-list .pv-author__sub .pv-author__date { display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; color: var(--muted); }
.post-meta-list .pv-author__avatar .lv-badge-wrap { width: 38px !important; }
.post-meta-list .pv-author__avatar .xp-icon {
  position: absolute; bottom: -4.83px; left: 50%; transform: translateX(-50%); /* 사진 38 · 세로가림 24% */
  z-index: 2; margin: 0; line-height: 0;
}
.post-meta-list .pv-author__avatar .xp-icon img {
  height: calc(38px * var(--na-lv-ratio, 0.80)) !important; width: auto !important; display: block; transform: none;
  filter: drop-shadow(0 0.8px 1px rgba(0,0,0,0.15));
}

/*--------------------------------------------
  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 가 따라 늘린다).
     ⚠ white-space:pre + 가로 스크롤(한 줄 유지) 방식은 2026-08-18 시도했다가 되돌렸다 —
       되살리지 말 것. 앞부분이 화면 밖으로 밀려 자기가 쓴 내용을 한눈에 볼 수 없다.
     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;
}
/* 모바일: 88% 축소 해제(2026-08-18) — 화면이 좁아 실제 입력 폭이 과하게 줄어든다.
   PC 는 88% 유지 — 본문 폭 대비 좌우 여백이 있어야 입력줄이 문단과 구분된다.
   답글 입력창만 예외로 좌측을 남긴다: 아래 .cmt-compose::before 의 ┗ 연결선이 left:-14px 에
   그려지므로, 여기서 100% 로 펴면 연결선이 카드 밖으로 나가 잘린다. */
@media (max-width: 575px) {
  /* 이모티콘 버튼은 모바일에서 숨긴다(2026-08-18) — 휴대폰 키보드가 이미 이모지를 제공하므로
     같은 기능이 두 번 있는 셈이고, 좁은 입력줄에서 글자 자리만 잡아먹는다.
     사진 첨부(이미지) 버튼은 키보드에 대응물이 없으므로 남긴다.
     글쓰기 화면의 같은 버튼은 대상이 아니다 — .cmt-input-line 안으로만 한정한다. */
  .cmt-box .cmt-input-line .btn_comment[title="이모티콘"] { display: none; }

  /* 가로 최대치(2026-08-18) — 섹션 좌우 여백(#viewcomment 의 px-3 = 14px)을 12px 씩 회수한다.
     남긴 2px 은 알약의 둥근 모서리가 화면 끝에 물려 잘려 보이지 않게 하는 최소치다.
     완전히 화면 끝까지 붙이려면 -14px(= 여백 전량 회수). */
  .cmt-box .cmt-compose {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }
  /* 알약 안쪽 좌측 여백도 4px 회수 — 글자가 시작되는 지점이 그만큼 왼쪽으로 간다.
     위·아래는 2줄 구성이 되면서 여백이 필요해 6px 로 준다(PC 는 2px 유지). */
  .cmt-box .cmt-input-wrap { padding: 6px 8px 6px 12px; }
  /* 답글 입력창 — 좌측 16px 은 ┗ 연결선 자리라 유지하고, 우측만 원댓글과 같은 최대치로 뺀다. */
  #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줄 구성 =====
   ⚠ 이 블록은 반드시 위 .cmt-input-line / #wr_content / #btn_submit 기본 규칙 '뒤'에 온다.
     미디어쿼리는 특이도를 올려주지 않으므로, 앞에 두면 같은 특이도의 기본값(flex:1 1 auto,
     max-width:0 …)이 순서로 이겨 아무 것도 적용되지 않는다(2026-08-18 실제로 겪음).
   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(.pv-author__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
--------------------------------------------*/
/* 작성폼 = 패널 3개 [2026-08-22 사용자 결정] — 업체 게시판 작성폼과 같은 구조다
   (상단바 .tw-topbar → 본문 카드 .tw-card → 액션 #twActions).
   ⚠ 구 규격(2026-08-19)은 「#bo_w 자체가 카드 1개」였고 제목·입력·버튼이 그 안에 다 들어 있었다.
     그래서 카드 면(배경·경계선·라운드·패딩)이 #bo_w 에 있었고, 행 사이를 여는 선/닫는 선으로 갈랐다.
     지금은 면을 세 자식(.fb-w-topbar / ul.fb-w-fields / .bo-w-actions)이 각자 갖고
     #bo_w 는 폭만 잡는 투명 래퍼다 — 되돌릴 땐 세 패널 규칙을 지우고 여기에 면을 되돌린다.
   ⚠ fb 계열 형제 보드(betting-tips·muktui)는 아직 구 1카드 구조다 — 같이 바꿀 땐 두 파일을 수동 복사한다. */
#bo_w {
  --fb-w-pad: 20px;      /* 패널 3개 공통 안쪽 여백 — 업체 작성폼 .tw-card 와 같은 값 */
  --fb-w-gap: 16px;      /* 패널 사이 간격 — 업체 작성폼(.tw-topbar margin-bottom)과 같은 값 */
  /* 폭도 업체 작성폼과 같은 단 [2026-08-22] — 그쪽 정의처는 _co_write_body.php 의 `.tw-wrap`/`#twActions`
     `max-width:900px; margin:0 auto`. 목록·상세는 칼럼 폭을 그대로 쓰지만 **작성폼만 좁혀 가운데** 두는 건
     입력 줄이 길면 라벨↔입력 거리가 멀어져서다(업체 게시판이 같은 이유로 그렇게 한다).
     ⚠ margin 은 롱핸드 — 축약형으로 쓰면 아래 ≤575px 의 거터 상쇄 음수 마진과 소유권이 겹친다. */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* ⚠ 구 600px 중간 단계(--fb-w-pad: 14px 18px)는 제거했다 [2026-08-22] — 576~600px 25px 구간에서만
   좌우가 18px 이 되어, 다른 작성폼(20px → 575px 에서 14px)과 그 구간만 어긋났다. 되살리지 말 것. */

/* 패널 공통 면 — 4모서리 라운드 `--r-10` + 1px 경계선 + 옅은 그림자.
   라운드는 이 보드가 이미 쓰는 값으로 통일했다 [2026-08-22] — 상세 카드 `#bo_v`(§2)·
   목록 면 `#bo_list_wrap.fb-wrap`(list.css)·업체 작성폼 패널이 전부 `--r-10` 이다.
   ⚠ 구 값 `--r-16` 은 「상세와 같은 규격」이라는 주석을 달고 있었지만 실제 `#bo_v` 는 `--r-10` 이라
     주석이 틀렸던 것이다 — 되돌리지 말 것.
   ⚠ 세 선택자를 한 규칙으로 묶는다(패널마다 값을 따로 두면 세 면이 조용히 어긋난다). */
#bo_w .fb-w-topbar,
#bo_w .fb-w-fields,
#bo_w .bo-w-actions {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  /* 그림자 = 업체 작성폼 패널(.tw-topbar/.tw-card/#twActions)과 같은 벌 [2026-08-22].
     그쪽은 리터럴 `0 2px 8px rgba(20,30,60,.05)` 인데, 이 스킨은 토큰을 쓰므로 가장 가까운
     같은 리터럴을 쓴다(토큰에 이 값이 없다). 구 --sh-sm(0 2px 6px)은 번짐이 2px 짧아 미세하게 달랐다 [2026-08-22].
     ⚠ `--sh-card`(0 6px 6px)를 쓰지 말 것 — 그건 아래로 6px 떨어진 더 깊은 그림자라 업체 작성폼과 다르게 보인다.
     ⚠ 이 보드의 상세 카드(#bo_v)는 `box-shadow:none` 이다 — 작성폼만 업체 작성폼 쪽에 맞춘 것이고,
       상세로 번지게 하지 말 것. */
  box-shadow: 0 2px 8px rgba(20,30,60,0.05);
  padding: var(--fb-w-pad);
}
#bo_w .fb-w-topbar,
#bo_w .fb-w-fields { margin-bottom: var(--fb-w-gap); }

/* (1) 상단바 패널 — 업체 작성폼(_co_write_body.php .tw-topbar)과 같은 치수(패딩 14px 20px). */
#bo_w .fb-w-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
#bo_w .fb-w-topbar-l { display: flex; align-items: center; gap: 13px; min-width: 0; }
#bo_w .fb-w-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-10);
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#bo_w .fb-w-mark svg { display: block; }
#bo_w .fb-w-title { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.5; }   /* 업체(.tw-topbar)·구인구직(.jr-w-title)과 같은 벌 — 800/1.5 가 정본 */
#bo_w .fb-w-sub { margin-top: 2px; font-size: 12px; color: var(--muted-2); line-height: 1.5; }   /* 구 1.4 는 16×1.4=22.4 로 소수였다(§2 「곱이 정수」 위반) */

/* (3) 액션 패널 — 업체 작성폼 #twActions 와 같은 치수(패딩 14px 20px · 버튼 간격 16px · 우측 정렬).
   구 규격은 부트스트랩 그리드로 두 버튼이 폭을 반씩 먹었다 — 모바일 블록에서만 그 배치로 되돌린다. */
#bo_w .bo-w-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* 버튼 — 업체 작성폼 `.tw-w-btn` 이식(값은 토큰으로 치환).
   ⚠ 부트스트랩/테마 버튼 클래스(`.btn .btn-lg .btn-primary .btn-basic .en`)는 **붙이지 않는다** —
     ① `.btn-lg` 가 글자 18px · 라운드 3px 이라 이 폼의 어떤 요소와도 안 맞았고
     ② `.btn-primary` 색 주인이 나리야 색상프리셋(theme/Nariya-A/css/color/*.css)이라 브랜드 토큰을 안 따랐고
     ③ `.en`(Roboto)은 한글 글리프가 없어 「취소」·「작성완료」가 시스템 기본 한글꼴로 떨어졌다.
     같은 이유로 업체·업체이벤트 작성폼도 자체 버튼 클래스를 쓴다(.tw-w-btn / .be-btn).
   font-family:inherit 필수 — 브라우저는 form control 에 시스템 UI 폰트를 먹인다. */
#bo_w .fb-w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: var(--r-10);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
#bo_w .fb-w-btn:hover { text-decoration: none; }
#bo_w .fb-w-btn--ghost {
  background: var(--card);
  border: 1px solid var(--line-2);
  color: var(--sub);
}
#bo_w .fb-w-btn--ghost:hover { background: var(--field-bg); color: var(--ink); }
/* ⚠ 두 버튼은 **완전히 같은 상자**다 [2026-08-22] — 패딩·테두리·높이는 위 .fb-w-btn 한 곳에서만 정하고
   여기서는 색만 바꾼다. 구 값은 주 버튼만 좌우 30px 이라 폭이 12px 넓었다. padding 을 다시 넣지 말 것. */
#bo_w .fb-w-btn--primary {
  border: 1px solid transparent;   /* ghost 와 테두리 두께를 맞춰 두 버튼 높이가 같아진다 */
  background: var(--brand);
  color: #fff;
}
#bo_w .fb-w-btn--primary:hover { background: var(--brand-hover); color: #fff; }
#bo_w .fb-w-btn--primary:disabled { opacity: .6; cursor: default; }   /* fwrite_submit() 이 전송 직후 disabled 를 건다 */

/* 모바일은 패널 3개가 각각 껍데기를 벗고 목록과 같은 형태가 된다 [2026-08-19 결정 → 2026-08-22 패널 3개로 확장].
   ⚠ 구 규약 「작성폼은 full-bleed 대상이 아니다」(§9.2, 2026-08-17)를 뒤집은 것이다 —
     DESIGN_SYSTEM.md 도 함께 고쳤다. 되돌릴 땐 문서도 같이 되돌린다.
   목록(list.css 의 #bo_list_wrap.fb-wrap)이 ≤575px 에서 하는 처리와 같은 구조다:
   **면은 화면 끝까지, 인셋은 안쪽이 14px 로 갖는다**(§9.2 「모바일 목록 면은 full-bleed 다」).
   ⚠ 구 규격에서 버튼 줄만 면 밖(투명)이었다 — 액션이 독립 패널이 된 지금은 세 면이 같은 대우를 받는다.
   ⚠ 거터 숫자를 복사하지 말 것 — 주인은 custom-sidebar.css 의 --page-gutter
     (`.sbc-site-main #nt_body` 의 ≤575px 블록에서 선언 → #bo_w 가 상속).
   ⚠ width 를 주지 않는다 — #bo_w 는 블록이라 음수 마진만으로 폭이 그만큼 늘어난다.
     (상단 서브메뉴처럼 width:100% 를 가진 요소였다면 우측에 거터 2배가 남았을 것) */
@media (max-width: 575px) {
  #bo_w {
    --fb-w-pad: 14px;   /* 목록 화면과 같은 인셋 */
    margin-left: calc(-1 * var(--page-gutter, 12px));
    margin-right: calc(-1 * var(--page-gutter, 12px));
  }
  /* 면은 화면 끝까지 — 좌우 테두리·라운드를 끄고 위아래 선만 남긴다(선은 면의 경계다). */
  #bo_w .fb-w-topbar,
  #bo_w .fb-w-fields,
  #bo_w .bo-w-actions {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  /* 입력 패널의 좌우 인셋은 목록이 아니라 **행(li)** 이 갖는다 — 목록에 주면 행의 테두리 상자가
     그만큼 좁아진다. 행 안쪽 글자는 아래 li 규칙의 14px 로 같은 단에 선다. */
  #bo_w .fb-w-fields {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 행 사이 구분선은 전부 없다 — 패널 테두리가 폼을 여닫는 선이므로 안쪽에는 선이 하나도 없다
   [2026-08-19 사용자 결정 → 2026-08-22 패널 분리로 여는 선/닫는 선까지 테두리에 흡수].
   구 상태는 부트스트랩 list-group 기본대로 **모든 행이 아래 선**을 가져 입력칸마다 줄이 그어져 있었다.
   ⚠ 좌우 선도 여기서 끈다 — 패널 테두리와 겹치는 잔선이다.
   ⚠ fb 계열 형제 보드(betting-tips·muktui)는 아직 구 1카드 구조(여는 선/닫는 선)다 — 한쪽만 보고 판단하지 말 것. */
#bo_w .list-group-item {
  padding-left: 0;
  padding-right: 0;
  /* 세로 여백은 부트스트랩 기본 0.75rem(12px) 대신 14px — 행 구분선을 없앤 뒤로 행을 갈라 주는 건
     여백뿐이고, 피해금액 행처럼 입력칸 아래 한 줄이 더 붙는 행이 답답해 보였다 [2026-08-19]. */
  padding-top: 14px;
  padding-bottom: 14px;
  border: 0;
}
/* 첫 행 위 / 마지막 행 아래 여백은 패널 패딩(--fb-w-pad)이 소유한다 — 행 패딩이 그 위에 얹히면
   패널 천장·바닥 여백만 두 겹이 된다. */
#bo_w .list-group-item:first-child { padding-top: 0; }
#bo_w .list-group-item:last-child { padding-bottom: 0; }

/* 모바일 행 인셋 — 면(ul)은 화면 끝까지 가고 인셋은 행이 갖는다(§ 위 575px 블록의 나머지 절반).
   ⚠ 이 선언은 반드시 위 `#bo_w .list-group-item { padding-left:0 }` **뒤**에 있어야 한다.
     둘의 특이도가 (1,1,0) 으로 같아, 미디어쿼리 안에 있어도 앞에 두면 조용히 죽는다. */
@media (max-width: 575px) {
  #bo_w .list-group-item {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* 버튼은 반반으로 — 업체 작성폼(#twActions .tw-w-btn)과 같은 처리.
     min-width:0 + nowrap 은 320px 급 안전망 — 없으면 min-content(글자+패딩)에 걸려 버튼이 안 줄고
     글자가 두 줄로 접힌다. 좌우 패딩도 10px 로 낮춰 두 버튼 폭이 정확히 같아진다. */
  #bo_w .fb-w-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }
}

/* 라벨은 입력칸 **위**에 선다 — 「제목 / 입력칸 / 분류 / 입력칸 / 내용 / 입력칸」 세로 배치
   [2026-08-22 사용자 결정]. 업체 작성폼의 패널 헤더(.tw-panel-h → 그 아래 입력)와 같은 순서다.
   ⚠ 구 규격은 **PC 에서만** 라벨을 좌측 고정폭 칼럼(--fb-label-w:120px)으로 세우고 입력칸을
     오른쪽에 뒀다. ≤767px 은 부트스트랩 col-md-* 가 꺼져 이미 세로였으니, 뷰포트마다 배치가
     갈려 있었다 — 이번 변경으로 **전 구간이 같은 세로 배치**가 됐다.
   마크업의 부트스트랩 그리드(.row > .col-md-2 / .col-md-10)는 그대로 두고 폭만 100% 로 눕힌다.
   행 마크업 12곳을 건드리지 않는 최소 변경이고, 되돌릴 땐 이 규칙 블록만 구 버전으로 바꾸면 된다.
   ⚠ 이때 --fb-label-w 변수도 제거했다(참조 0) — 되살리려면 #bo_w 의 변수 선언부터 되돌릴 것. */
#bo_w .form-group.row > .col-form-label {
  flex: 0 0 100%;
  max-width: 100%;
  /* 부트스트랩 .col-form-label 의 세로 패딩(calc(.375rem + 1px))은 입력칸과 **가로로** 나란할 때
     기준선을 맞추는 값이다. 세로 배치에선 라벨 위 여백이 되어 행 간격이 두 겹이 되므로 0 으로 두고,
     아래 6px 만 라벨↔입력칸 간격으로 남긴다. */
  padding-top: 0;
  padding-bottom: 6px;
  padding-right: 0;
}
#bo_w .form-group.row > .col-md-10,
#bo_w .form-group.row > .col-sm-10 {
  flex: 1 1 0;      /* basis auto 금지 — 이 칼럼에 에디터(cheditor5, 100% 폭)가 들어가 콘텐츠 기준으로 폭이 잡히면 행이 넘친다 */
  min-width: 0;
  max-width: none;
}
/* 짧은 필드(col-md-4 이름·비밀번호 / col-md-7 이메일·홈페이지)는 부트스트랩 폭(33%/58%)을 그대로
   쓴다 — 라벨이 한 줄을 통째로 쓰므로 그 아래 줄에서 왼쪽부터 채워진다. */

/* 행 제목 앞 파란 세로 막대 — 업체 작성폼(skin/board/_co_write_body.php 의 .tw-bar)과 같은 규격
   3×16px · 라운드 2px · 브랜드 블루. 코어가 찍는 label 마크업을 건드리지 않도록 ::before 로 그린다.
   라벨이 한 줄을 통째로 쓰게 된 뒤로는 막대+간격 11px 이 글자를 밀어도 줄바꿈 걱정이 없다
   (구 고정폭 칼럼 시절엔 이 11px 때문에 '자동등록방지'가 두 줄로 접혀 --fb-label-w 를 108→120px 로 올렸었다). */
#bo_w .form-group.row > .col-form-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
#bo_w .form-group.row > .col-form-label::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--brand);
}

/* 입력칸 배면은 흰색 — 업체이벤트 작성폼(.be-w-input 이 흰 카드 위 transparent)과 같은 인상
   [2026-08-22 사용자 지시]. 회색 채움은 이 스킨이 아니라 전역 입력 정본
   (theme/Nariya-A/css/custom-sidebar.css `.sbc-site-main .form-control { background: var(--surface-fill) }`)
   이 사이트 전체에 !important 로 거는 값이다.
   ⚠ 그 전역 선언을 고치면 회원가입·검색·업체 후기까지 전부 흰색이 된다 → 작성 패널(#bo_w)로
     스코프를 좁혀 여기서만 되돌린다. 전역 규칙이 !important 라 이쪽도 !important 가 필요하다.
   ⚠ background-color 롱핸드다 — 축약형 background 로 쓰면 전역 select 화살표(background-image)가
     함께 지워진다(전역 정본 :focus 주석의 2026-08-19 전례와 같은 함정).
   포커스 상태(흰 배경 + 파란 테두리)는 전역 그대로다 — 이제 평상시와 포커스의 차이는 테두리 색뿐. */
#bo_w .form-control {
  background-color: var(--card) !important;
}

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

@media all and (max-width:575px) {
  .responsive #bo_w #wr_content {
    max-height: 160px !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;
}

/* 더보기 드롭다운 메뉴 — 카드형 */
/* 카드형 드롭다운 (상단 더보기 · 댓글 정렬 공용) */
/* 설정 메뉴 패널 — 테두리·반경·그림자·패딩은 전역 정본(custom-sidebar.css) 담당.
   DESIGN_SYSTEM.md §14. 여기엔 이 메뉴만의 폭 규칙(내용폭 + 220px 상한)만 남긴다. */
.dropdown-menu.bo-v-menu {
  width: max-content;
  min-width: 0;
  max-width: 220px;
  margin-top: 6px;
}

/* 메뉴 항목 */
.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 폴백
  (작성일/조회·댓글·추천 수, 댓글 날짜·추천수, IP)
  IP 는 날짜와 나란히 놓이는 숫자값인데 본문 폰트를 써서 날짜와 글꼴이 달라 보였다.
--------------------------------------------*/
.post-meta-list .pv-author__sub .pv-author__date,
.post-meta-list .pv-author__sub .pv-stat,
.post-meta-list .pv-author__ip,
#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);
}
/* 북마크(보관함) — 박스(36px·테두리·라운드·hover)는 위 .bo-v-actions > .btn 이 담당한다.
   ⚠ 값을 여기 복사하지 말 것 — 박스 규격은 형제 규칙 한 곳이 정본이다.
     (구 주석은 테마 .sbc-site-main .btn{border-radius:10px !important} 를 근거로 들었는데
      그 전역 규칙은 현재 존재하지 않는다 — 2026-08-16 전수검색 0건. 지침 자체는 유효.)
   여기서는 형제 버튼에 없는 '보관됨' 상태색만 얹는다. 도형/선굵기는 sbc_bm_icon(_bm_icon.php) 정본. */
.bo-v-actions > .bo-v-bookmark.is-active {
  border-color: var(--brand);
  color: var(--brand);
}
/* ⚠ fill 은 두 줄 모두 필요하다 — 활성 쪽만 두면 '보관됨'으로 들어와 해제할 때 svg 의 fill 속성이 남아
   회색 꽉찬 북마크가 된다(사유는 totolist view-detail.css 같은 자리 주석 참조). */
.bo-v-bookmark svg { display: block; fill: none; } /* 크기는 sbc_bm_icon(17) 이 정한다 — 여기서 width/height 를 다시 잡으면 PHP 값이 무시된다 */
.bo-v-bookmark.is-active svg { fill: currentColor; }

/* 아이콘 크기 (#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. 메타박스 우측 통계 (조회·댓글·추천)
  작성자(좌) 반대편으로 분리했다. 기존 .pv-stat 규칙(189-192행)이
  .pv-author__sub 하위로 스코프돼 있어 여기서 다시 선언한다.
--------------------------------------------*/
.post-meta-list .pv-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  /* 숫자 굵기 400 [2026-08-23 사용자 지정 — 구 500 에서 낮춤].
     이 칸은 아이콘(FA, 단일 굵기)과 숫자만 들어가므로 칸에 걸어도 숫자에만 걸린 것과 같다.
     ⚠ 5보드(승부처이벤트·업체이벤트·베팅지식·커뮤니티·먹튀검증) 공통값 — 한쪽만 고치지 말 것. */
  font-weight: 400;
  /* ul 이 align-items:center 라 2줄짜리 작성자 블록의 '중앙'에 걸린다.
     날짜 줄(작성자 블록의 아랫줄)과 같은 라인에 놓이도록 아래로 정렬 + 날짜와 동일한 행간. */
  align-self: flex-end;
  line-height: 1.2;
}
.post-meta-list .pv-stats .pv-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* 아이콘과 숫자가 갈라져 두 줄이 되는 것을 막는다 (승부처이벤트·업체이벤트와 같은 처리) */
  white-space: nowrap;
  font-size: 1rem;
  /* 카운트 티어 — 토큰 사다리에서 날짜(.pv-author__sub, --sub)보다 **한 단계 아래**다
     [2026-08-23 한 톤 다운, 사용자 지정]. tokens.css 의 --muted 설명("흐린 라벨")이 이 자리다.
     ⚠ 5보드 공통값(승부처이벤트·업체이벤트--bev-mute·베팅지식·커뮤니티·먹튀검증) — 한쪽만 고치지 말 것.
       §5 의 .pv-author__date 도 2026-08-23 같은 --muted 로 내렸다 — 한 줄이 한 톤으로 읽힌다. */
  color: var(--muted);
  font-family: 'Oxanium', 'Paperozi', sans-serif;
}
.post-meta-list .pv-stats i {
  font-size: 1rem;
  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(베이스라인 정렬 아님)라 박스 메트릭까지 넣어 계산했다:
     칸 높이 16.8px(=14×1.2) · 아이콘 박스 14px 중앙정렬 → 아이콘 baseline 13.4px · 숫자 잉크중심 7.63px
     → top = 잉크중심(u)/1792×14 − 5.77
   ⚠ 측정은 반드시 **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.27px; }
.post-meta-list .pv-stats .fa-commenting-o  { top: -1.38px; }
.post-meta-list .pv-stats .fa-thumbs-o-up   { top: -0.27px; }
.post-meta-list .pv-stats .fa-thumbs-o-down { top: -1.27px; }
.post-meta-list .pv-stats .fa-thumbs-up     { top: -0.77px; }
.post-meta-list .pv-stats .fa-thumbs-down   { top: -1.77px; }

/*--------------------------------------------
  13. 본문 폭 — 900px (토토 .vd-wrap 과 동일)
  상단바(.bo-v-topbar)와 본문 카드(#bo_v)는 .col-12.na-col 안의 형제 노드다.
  둘 다 같은 폭으로 묶어야 좌우 끝이 맞는다.
--------------------------------------------*/
.bo-v-topbar,
#bo_v {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------
  14. 카드 안쪽 좌우 여백 통일
  제목 header 는 px-sm-0 라 데스크톱에서 패딩이 0 이 되어 테두리에 붙고,
  본문·메타·댓글헤더는 px-3 이라 단이 안 맞았다.
  카드 직계 섹션의 좌우 여백을 한 값으로 맞춘다. (댓글 카드는 이 안에서 아바타만큼 더 들여쓰기됨)
--------------------------------------------*/
/* 여백 단일 토큰 — 제목 헤더·메타·본문·버튼그룹·댓글영역 전부 4방향 같은 섹션 패딩(토토 .vd-card 방식) */
#bo_v > header,
#bo_v .post-meta-box,
#bo_v #bo_v_con,
#bo_v #bo_v_btn_group,
#bo_v #viewcomment {
  padding: var(--fb-pad) !important;
}
/* 제목+작성자는 한 헤더 묶음 — 사이 여백만 좁힌다(제목 아래·작성자 위 패딩 축소) */
#bo_v > header {
  /* 제목 위 여백만 16px 상한 — 좌우·아래 섹션은 그대로 --fb-pad(24px).
     제목 아래(작성자 줄까지)가 6+2=8px 인데 위만 24px 이라 머리만 무거워 보였다 [2026-08-23 사용자 지정].
     min() 인 이유: 모바일은 --fb-pad 가 이미 18/14px 이라 상한에 걸리지 않고 그대로 간다.
     ⚠ 값을 바꾸면 #bo_v_title 의 margin-top(-2px = line-height 1.2 half-leading 상쇄)은 건드리지 말 것 —
       그 보정이 있어야 글자 윗선이 좌측 여백과 같은 선에 선다. */
  padding-top: min(var(--fb-pad), 16px) !important;
  padding-bottom: 6px !important;
}
#bo_v .post-meta-box { padding-top: 2px !important; padding-bottom: 12px !important; }   /* 프로필 아래 여백 24 → 12 (반) */
/* 댓글 영역: 내부 카운트(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 제거 [2026-08-23] — 카드 자체 14px 이 첫 섹션(header)의 위 패딩과 겹쳐
       모바일 제목 위만 27px 이 됐다(PC 16px 보다 넓었다). 위 여백은 섹션이 소유한다.
       아래는 #viewcomment 가 자기 패딩을 14px 깎아 쓰므로 여기 14px 이 그 몫을 메운다 — 남긴다. */
    padding-bottom: 14px;
  }
}

/* 흰 면을 화면 좌우 끝까지 — 목록·업체 상세와 같은 처리(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;
}

/* 본문 상단 여백 정리 — 메타박스 마진 + #bo_v_con 의 마진·패딩이 겹쳐 좌우에 비해 과했다.
   본문 자체의 위쪽 마진·패딩을 걷고 메타박스 아래 여백 하나만 남긴다. */
#bo_v #bo_v_con { margin: 0 !important; }   /* 상하좌우 패딩은 위 섹션 그룹 규칙(var(--fb-pad))이 담당 */
#bo_v #bo_v_info { margin-bottom: 0 !important; }   /* 섹션 사이 간격은 각 섹션 패딩이 만든다(margin 겹침 제거) */

/*--------------------------------------------
  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 인 토큰을 따른다.
--------------------------------------------*/
#bo_v .post-meta-box.border-bottom {
  border-bottom-color: var(--line-2) !important;
}
#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;
}

/* 댓글 개수 — 1.2rem 은 본문(16px)보다 커서 제목처럼 튄다. 본문 크기로 낮춘다.
   색도 --ink(거의 검정)라 본문(--body)보다 진했다. 본문과 같은 톤으로 낮춰 튀지 않게. */
#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순위)라
     한글 모양은 지금과 완전히 동일하다. 자식(b · .pv-cmt-page)은 상속으로 따라온다.
     ⚠ 같은 항목을 낮은 특이도(.pv-cmt-head .float-left)에 적으면 이 #bo_v 규칙에 진다.
     동일 처리: bizevent · sbc_event · betting-tips · free-community 4개 스킨(2026-08-17). */
  font-family: var(--font-num);
}
#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) */

/*--------------------------------------------
  22. 하단 안내 콘텐츠 (목록 페이지)
  업체 3보드 .sbc-cl__guidebox 와 같은 규칙 — 클래스명만 이 스킨 네임스페이스(fb-)로.
  한쪽을 고치면 다른 쪽도 함께 고친다(자동 아님).
  이 파일에 두는 이유: list.css 는 free-community·betting-tips·sbc_event 3보드가
  byte-identical 로 공유하고 git 미추적이다(DESIGN_SYSTEM §8). 이 콘텐츠는 커뮤니티 전용이라
  공유 파일에 넣으면 나머지 2보드에 고아 규칙이 남는다. style.css 는 이 보드 전용 + git 추적.
  체크리스트 카드(-grid/-item/-sub/-note)는 이 보드에 쓰지 않으므로 옮기지 않았다.
--------------------------------------------*/
/* 하단 안내는 카드 면을 갖지 않는다 (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 h3 {
  margin: 26px 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.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; }

/* 다크모드 — 업체 3보드 하단 콘텐츠와 같은 값 */
html.dark-mode .fb-guide { background: transparent; }
html.dark-mode .fb-guide h2,
html.dark-mode .fb-guide h3 { 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 h3 { border-bottom-color: #334155; }
html.dark-mode .fb-guide a { color: #60A5FA; } /* 다크 브랜드 톤 — 아이콘 버튼 hover 와 동일 */

/* 모바일: 목록 래퍼와 같은 폭 규칙(테두리 없이 거터에 맞춤) + 한 단계 낮춘 타입 스케일 */
@media (max-width: 768px) {
  .fb-guide {
    padding-left: 0;
    padding-right: 0;
  }
  .fb-guide h2 { font-size: 17px; }
  .fb-guide h3 { font-size: 15px; margin-top: 22px; }
  .fb-guide p { font-size: 13.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; }

/* ── 자동등록방지(캡차) — PC·모바일 공통 정렬 [2026-08-22] ───────────────────────
   코어(plugin/kcaptcha/kcaptcha.lib.php:242 captcha_html)가 내주는 것:
     <fieldset id="captcha"> <legend> · (모바일만)<audio controls> · <img#captcha_img> ·
                             <input#captcha_key> · (PC만)<button#captcha_mp3> · <button#captcha_reload> · <span#captcha_info>
   그대로 두면 인라인으로 흘러 오디오바·이미지·입력칸·새로고침이 제각각 크기로 쌓인다.

   **그리드 3칸**으로 세운다 — 1줄: 이미지 | 듣기 | 새로고침 / 2줄: 입력칸(세 칸 전체) / 3줄: 안내문.
   ⚠ flex 가 아니라 grid 인 이유 [2026-08-22 재작성] — 「입력칸 폭 = 윗줄 전체 폭」을 flex 로는 못 만든다.
     `width:100%` 는 줄을 못 끊고, `flex-basis:100%` 는 버튼을 늘려 놓으며(그래서 버튼이 너무 길었다),
     `basis:100% + max-width` 는 **클램프된 값으로 줄을 나눠서**(hypothetical main size) 다시 한 줄이 된다.
     grid 는 `grid-column: 1 / -1` 한 줄로 「세 칸 + 간격만큼」이 정확히 떨어진다.
   ⚠ justify-content:start — 칸을 내용 크기로 두고 왼쪽부터 채운다(폼 칼럼 폭만큼 늘어나지 않게).
   ⚠ 듣기 버튼(#captcha_mp3)은 코어가 모바일에 안 준다 — write.skin.php 의 스크립트가 만든다.
     그게 성공했을 때만 .fb-cap-ready 가 붙어 네이티브 <audio> 바를 숨긴다(실패 시 듣기 수단이 남는다). */
#bo_w #captcha {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
#bo_w #captcha.fb-cap-ready audio { display: none; }
#bo_w #captcha audio { grid-column: 1 / -1; width: 100%; margin: 0; }
/* 테두리 색 — 코어 g5.css 는 PC 에 #898989(진한 회색)를 준다(같은 파일 61행). 옆 버튼·아래 입력칸이
   --line-2 인데 이미지만 톤이 진해 혼자 튀었다 → 세 상자를 같은 선 톤으로 맞춘다 [2026-08-22].
   (모바일 코어값은 #e9e9e9 이라 원래 연했다 — 이제 두 환경이 같은 값이다.) */
#bo_w #captcha #captcha_img { grid-column: 1; grid-row: 1; margin: 0; max-width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-10); }
/* 버튼 — 코어 g5.css 는 40×40 아이콘 버튼(배경 이미지 + text-indent:-999px)으로 만든다. 글자 버튼으로 되돌린다.
   높이는 고정값 대신 stretch 로 같은 줄(=숫자 이미지) 높이에 맞춘다. 폭은 글자 기준(늘리지 않는다). */
#bo_w #captcha .fb-cap-btn {
  grid-row: 1; align-self: stretch; box-sizing: border-box;
  width: auto; height: auto; padding: 0 12px; margin: 0;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-10);
  font-size: 12px; font-weight: 700; color: var(--sub); font-family: inherit;
  text-indent: 0; overflow: visible; white-space: nowrap; cursor: pointer;
}
#bo_w #captcha #captcha_mp3.fb-cap-btn { grid-column: 2; }
#bo_w #captcha #captcha_reload.fb-cap-btn { grid-column: 3; }
/* 눌린 반응 — 구 상태는 hover/active 가 없어 「눌렀는지 알 수 없다」는 문제가 있었다.
   ⚠ 터치 기기엔 hover 가 없다 — :active 가 실제 피드백을 담당하고, .is-on 은 JS 가 붙이는 '동작 중' 표시다. */
#bo_w #captcha .fb-cap-btn:hover { border-color: var(--brand); color: var(--brand); }
#bo_w #captcha .fb-cap-btn:active { background: var(--field-bg); border-color: var(--brand); color: var(--brand); transform: translateY(1px); }
#bo_w #captcha .fb-cap-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#bo_w #captcha .fb-cap-btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 입력칸 — 윗줄(이미지+버튼 2개+간격) 폭에 정확히 맞춰 떨어진다 */
#bo_w #captcha #captcha_key {
  grid-column: 1 / -1; box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-10); background: var(--card);
  font-size: 16px; font-weight: 700; color: var(--ink); text-align: center; letter-spacing: 2px;
}
/* 코어 g5.css 의 letter-spacing:-0.1em 은 글자가 붙어 보여 이 박스 안에서만 0 으로 되돌린다 */
#bo_w #captcha #captcha_info {
  grid-column: 1 / -1; display: block; margin: 2px 0 0; padding: 0;
  font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  color: var(--muted-2); text-align: center;
}