@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 {
  width: auto;
  min-width: 120px;
  max-width: 200px;
  display: inline-block;
}
.fb-ca-hint {
  margin-left: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--grade-normal);
}
.fb-ca-free {
  color: var(--brand);
  font-weight: 700;
}

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

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

/*--------------------------------------------
  2. Title & Headings
--------------------------------------------*/
#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;
  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); }
.post-meta-list .pv-author__sub .pv-author__date { display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; color: var(--sub); }
.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#bo_w .list-group-item {
  padding-left: 0;
  padding-right: 0;
  border-left: 0;
  border-right: 0;
}
/* 그룹 바깥 테두리는 카드(#bo_w)가 담당 — 첫 항목 위(= '글쓰기' 제목 위)·마지막 항목 아래의
   1px 선은 카드 테두리와 겹치는 잔선이라 제거한다. 항목 사이 구분선(각 항목 border-bottom)은 유지.
   부트스트랩은 인접 항목의 border-top 을 0 으로 두므로 첫 항목만 위 선을 갖는다.
   첫 항목의 padding-top 도 0 — 카드 패딩 위에 항목 자체 패딩(0.75rem)이 얹혀
   '글쓰기' 제목 위 여백이 두 겹(31.5px)이었다. 이제 카드 패딩 18px 하나만 남는다. */
#bo_w .list-group-item:first-child { border-top: 0; padding-top: 0; }
#bo_w .list-group-item:last-child { border-bottom: 0; }

/* 라벨 ↔ 입력 간격 — 부트스트랩 col-md-2(16.67% ≈ 140px)는 '제목'·'분류' 같은 짧은 라벨 옆에
   100px 넘는 빈 공간을 남긴다. 레퍼런스 작성폼(bizevent .be-ilabel = 92px 고정)처럼 퍼센트를 버리고
   가장 긴 라벨 기준 고정폭(--fb-label-w)으로 바꾼다.
   ⚠ padding-right: 0 이 필수 — 기본 15px 를 남기면 콘텐츠 박스가 그만큼 좁아져 긴 라벨이 줄바꿈된다.
   ≤767px 는 col-md-* 자체가 꺼져 라벨이 한 줄을 통째로 쓰는 기본 동작이라 손대지 않는다. */
@media (min-width: 768px) {
  #bo_w .form-group.row > .col-form-label {
    flex: 0 0 var(--fb-label-w);
    max-width: var(--fb-label-w);
    padding-right: 0;
  }
  /* 라벨이 좁아진 만큼 전체폭 입력 칼럼이 남는 폭을 채워 오른쪽 끝을 카드에 맞춘다.
     짧은 필드(col-md-4 이름·비밀번호 / col-md-7 이메일·홈페이지)는 폭 그대로 왼쪽으로만 당겨진다. */
  #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;
  }
}

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

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

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

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

/*--------------------------------------------
  10. 숫자류 폰트 (Oxanium) — 한글은 Paperozi 폴백
  (작성일/조회·댓글·추천 수, 댓글 날짜·추천수, IP)
  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-8);
  background: var(--card);
  color: var(--sub);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.bo-v-listbtn:hover {
  border-color: var(--fb-bd-hover);
  background: var(--fb-hover-lift);
  color: var(--brand);
  text-decoration: none;
}
/* FA 글리프는 em 박스 아래쪽에 그려져 옆 텍스트보다 낮게 앉는다 — 아이콘만 올려 시각 중심을 맞춘다 */
.bo-v-listbtn .fa { font-size: 15px; line-height: 1; position: relative; top: -1px; }

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

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

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

/*--------------------------------------------
  12. 메타박스 우측 통계 (조회·댓글·추천)
  작성자(좌) 반대편으로 분리했다. 기존 .pv-stat 규칙(189-192행)이
  .pv-author__sub 하위로 스코프돼 있어 여기서 다시 선언한다.
--------------------------------------------*/
.post-meta-list .pv-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  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;
  font-size: 1rem;
  /* 좌측 날짜(.pv-author__sub)와 같은 줄에 놓이는 같은 보조정보 티어 — 함께 --sub 로 유지한다. */
  color: var(--sub);
  font-family: 'Oxanium', 'Paperozi', sans-serif;
}
.post-meta-list .pv-stats i {
  font-size: 1rem;
  line-height: 1;
  color: var(--sub);
}
/* Font Awesome 글리프는 em 박스 아래쪽에 그려져 있어 숫자(Oxanium, 어센더가 높다)보다
   낮게 앉는다. 아이콘만 살짝 올려 시각 중심을 맞춘다.
   thumbs 는 솔리드 글리프(fa-thumbs-up/down)로 바뀌면서 아웃라인 시절보다 더 아래로 내려앉아
   같은 보정이 필요해졌다. */
.post-meta-list .pv-stats .fa-eye,
.post-meta-list .pv-stats .fa-commenting-o,
.post-meta-list .pv-stats .fa-thumbs-up,
.post-meta-list .pv-stats .fa-thumbs-o-up,
.post-meta-list .pv-stats .fa-thumbs-o-down,
.post-meta-list .pv-stats .fa-thumbs-down {
  position: relative;
  top: -1px;
}

/*--------------------------------------------
  13. 본문 폭 — 900px (토토 .vd-wrap 과 동일)
  상단바(.bo-v-topbar)와 본문 카드(#bo_v)는 .col-12.na-col 안의 형제 노드다.
  둘 다 같은 폭으로 묶어야 좌우 끝이 맞는다.
--------------------------------------------*/
/* 네비를 본문 폭에 정렬 — 폭 조립은 custom-main.css 의 .na-top-sidemenu 가 담당.
   #bo_v 는 카드 자신(배경/그림자 보유)이라 선언값이 곧 border-box 실폭. */
.na-top-sidemenu--view { --na-content-w: 900px; }
.bo-v-topbar,
#bo_v {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------
  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 { padding-bottom: 6px !important; }   /* 상단은 그룹 규칙 24px 그대로 유지(상하좌우 24 고정) */
#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: 14px;
    padding-bottom: 14px;
  }
}

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

/* 본문 상단 여백 정리 — 메타박스 마진 + #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 {
  font-size: calc(1rem + 1px);
  font-weight: 600;
}
#bo_v .pv-cmt-head .float-left .pv-cmt-page {
  font-size: calc(.85rem + 2px);   /* +1px 상향 */
  font-weight: 400;
  color: var(--muted-2);
  margin-left: 4px;
}

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

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

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

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

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

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

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