@charset "utf-8";

/* =========================================================
 * bizevent — 업체 이벤트 게시판 스킨 (자유게시판 골격 + 이벤트 카드)
 * 색·라운드·그림자는 var(--*) 만 사용한다(DESIGN_SYSTEM.md §7-2).
 * SSOT 는 tokens.css(:root) — 이 파일에서 하드코딩 금지.
 *
 * ── 삭제 금지 (grep 오검출 주의) ──
 * - .be-empty-tit / .be-empty-txt / .be-empty-guide : write.skin.php 등에서 사용.
 * - .be-card-cmt : list.skin.php 사용(현재 주석 상태 — 복원 대비 유지).
 *
 * ── 상태 뱃지(.be-status) ──
 * 현재는 전 상태(always/upcoming/ongoing/ended) 무채색 통일 —
 * 업체 상세 이벤트 카드(.vd-event-dday) 기준. be-status-{code} 클래스는
 * 마크업에만 남는다(list/view PHP 동적 클래스 — 향후 상태별 구별 필요 시 재활용).
 * ========================================================= */

/*--------------------------------------------
  0-0. 로컬 토큰 — 표준 토큰(tokens.css)에 대응물이 없는 값만.
       이 파일은 목록·상세·쓰기 전부에서 로드되므로, list.css 와 공유하는
       토큰의 정의처는 여기다(list.css 는 목록에서만 로드됨).
       free-community/style.css 와 같은 관례.
--------------------------------------------*/
:root {
  /* 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;
  /* bizevent 의미색 — 뱃지(고정/인기/비공개) 전용. 상태 뱃지(.be-status)는 무채색 통일.
     핀(고정) 인디고는 브랜드 블루와 "구별"이 목적이라 --brand 로 통합하지 않는다. */
  --be-red:         #DC2626;   /* 인기(hot)/필수 표시 */
  --be-red-soft:    #FEF2F2;
  --be-orange:      #C2620C;   /* 비공개(private) */
  --be-orange-soft: #FFF7ED;
  --be-indigo:      #4338CA;   /* 고정(pin) */
  --be-indigo-soft: #EEF2FF;
  --be-indigo-line: #C7D2FE;
  --be-pin-bg:      #FBFCFF;   /* 고정 카드 배경 틴트 */
}

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

/* 구식 "단일 흰 카드" 규칙(배경·테두리·margin-bottom)은 bev-shell 리팩토링으로 삭제 (2026-07)
   — 카드 역할은 .bev-card 가 맡고, 하단 여백은 페이지 컨테이너(py)가 담당. 변수만 남긴다 */
#bo_v {
  --fb-pad: 24px;                              /* 가로 내부 여백 단일 소스 (댓글 영역 공통) — free-community/style.css 동일 관례 */
  --cmt-inset: 0px;                            /* 댓글 내부는 0 — #viewcomment 섹션 패딩(var(--fb-pad))에 올라탐 */
}

/*--------------------------------------------
  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로 강제하므로
   보드 전용으로 2-id(#bo_v ...) + !important 한 패턴으로 우선 적용한다.
   ▶ 제목/내용 폰트 크기는 여기 두 줄에서만 조정.
   (상세 제목은 아래 #bo_v.bev-shell #bo_v_title 24px 이 다시 이긴다) */
#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 {
  /* 안쪽 여백은 본문 카드(.bev-body padding)가 담당 — 구식 padding/margin/min-height 는
     카드 리팩토링 이전 잔재로 이중 여백·짧은 글 빈 공간을 만들어 제거 (2026-07) */
  color: var(--body);
  word-break: break-word;
  overflow: hidden;
}

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

/*--------------------------------------------
  5. Post Meta (상세 작성자 줄 — .bev-author 안에서 사용)
--------------------------------------------*/
.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; }
/* .sv_member 는 <a> 라 부모 color 를 상속하지 않아 색을 직접 지정해야 한다 */
.post-meta-list .pv-author__name { font-size: 1.12rem; font-weight: 500; color: var(--ink); }
.post-meta-list .pv-author__name .sv_member { font-size: 1.12rem; font-weight: 500; color: var(--ink) !important; }
.post-meta-list .pv-author__ip { font-size: 1rem; font-weight: 400; color: var(--muted-2); }
/* 날짜 + 통계 한 줄, 모두 동일 크기 */
.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,
.post-meta-list .pv-author__sub .pv-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; color: var(--sub); }
.post-meta-list .pv-author__sub i { 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: -5px; left: 50%; transform: translateX(-50%);
  z-index: 2; margin: 0; line-height: 0;
}
.post-meta-list .pv-author__avatar .xp-icon img {
  height: 28px !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; }

/* 댓글 영역 경계는 free 의 border-top 구분선 대신 카드화(아래 14′)가 담당 */
/* 댓글 카운트 헤더: 폰트 키우고 숫자 색상도 검정으로 통일 */
.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; }
/* bizevent: 액션줄이 단일 흰 카드가 아닌 본문 카드(.bev-body) 안에 있다 —
   구분선 없이 간격만 준다. 좌우·하단 여백은 .bev-body 패딩이 담당 */
#bo_v.bev-shell #bo_v_btn_group {
  margin-top: 24px;
  padding: 0 !important;   /* py-4 px-3 유틸 대체 */
}
html.dark-mode #bo_v_btn_group .btn-group { background: #26272b; }   /* --surface-fill 은 라이트 고정값 — 다크는 zinc 리터럴 관례 */

/* 플러스/마이너스(수동 높이조절) 숨김 — 자동확장으로 대체 (코어 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: 14px; 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; padding-top: 0.75rem; padding-bottom: 0; padding-left: calc(var(--cmt-inset) + 44px); min-height: 52px; position: relative; }
.comment-card .cmt-wrap.cmt-chat > header > div { padding-left: 0 !important; padding-bottom: 0 !important; }
.comment-card .cmt-wrap.cmt-chat header ul { display: flex; flex-direction: column; align-items: flex-start !important; justify-content: flex-start; gap: 1px; width: 100%; }
.comment-card .cmt-wrap.cmt-chat header ul > li { padding: 0 !important; margin: 0 !important; line-height: 1.35; }
.comment-card .cmt-wrap.cmt-chat header ul > li + li { margin-top: -5px !important; }
#bo_v .comment-card .cmt-wrap.cmt-chat header .cmt-report-item { position: absolute; top: 50%; transform: translateY(-50%); bottom: auto; right: 4px; margin: 0 !important; }
/* 본문 — 토토 후기(.ts-review-content)와 동일 규격: 14px / lh 1.6 / --body */
.comment-card .cmt-wrap.cmt-chat .cmt-content { padding: 6px var(--cmt-inset) 8px var(--cmt-inset) !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_w .list-group-item {
  padding-left: 0;
  padding-right: 0;
  border-left: 0;
  border-right: 0;
}

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

/*--------------------------------------------
  더보기 드롭다운 (상단바 .bo-v-actions 에서 사용)
--------------------------------------------*/
/* 카드형 드롭다운 (상단 더보기 · 댓글 정렬 공용) */
.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; }
}

/*--------------------------------------------
  14′. 댓글 영역 카드화 + 내부 여백 — free-community §14 어댑테이션
  free 는 #bo_v 가 단일 흰 카드라 섹션 패딩(--fb-pad)만 주지만,
  bizevent 는 쉘(#bo_v.bev-shell)이 투명하고 .bev-card 가 카드를 맡는다
  → #viewcomment 자체를 bev 카드 문법(--bev-* : 다크모드 자동)으로 세운다.
  padding 의 -14px 는 내부 카운트(pt-3)·페이징(pb-3)의 14px 를 상쇄해
  최종 상하 24px(=--fb-pad) 를 만든다 (free §14 동일 계산).
  !important 는 마크업의 px-3 유틸리티를 덮기 위함 (free §14 동일).
--------------------------------------------*/
#bo_v.bev-shell #viewcomment {
  background: var(--bev-card);
  border: 1px solid var(--bev-bd);
  border-radius: 14px;
  margin-bottom: 0;                  /* 마지막 카드 — 아래 여백은 페이지 컨테이너(py)가 담당 */
  padding: calc(var(--fb-pad) - 14px) var(--fb-pad) !important;
}
/* '댓글 N' 헤더를 본문과 같은 단에 (free §14 동일) */
#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; }
  #bo_v.bev-shell #viewcomment { border-radius: 12px; }   /* .bev-card 반응형 관례와 동일 */
}
/* 잔선 — 댓글없음 박스·페이징 줄의 부트스트랩 .border-top(#dee2e6)을 잔선 티어로 (free §15 동일) */
#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 만 10px 로 — 붙되 답답하지 않게.
   (li 의 좌우 패딩만 건드리므로 닉네임 자체의 위치·정렬 기준은 그대로다) */
#bo_v .comment-card header ul.d-flex {
  gap: 10px;
}
#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,
#bo_v .comment-card header ul > li.cmt-report-item {
  margin-left: auto;
}
/* 둘 다 있으면 IP 만 밀어내고 신고는 그 옆에 붙인다 (양쪽 다 auto 면 사이가 벌어진다) */
#bo_v .comment-card header ul > li.cmt-ip-item + li.cmt-report-item {
  margin-left: 0;
}

/* ⋯ 더보기 — 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); }
/* IP(관리자만) — 닉네임 줄을 좌우 양끝 배치: 닉네임(좌) · IP(우측 끝) */
#bo_v .comment-card header ul > li:first-child {
  display: flex;
  align-items: baseline;
  width: 100%;
  padding-right: 30px !important;   /* 우측 ⋯ 더보기(절대배치, ~26px) 자리 확보 — IP 가 겹치지 않게 (580행 padding:0!important 를 덮는다) */
}
#bo_v .comment-card header ul > li:first-child .cmt-ip-inline { margin-left: auto; }

/*--------------------------------------------
  20. 좋아요 버튼 — 토토 '도움이됐어요' 버튼 이식
  원본: skin/board/totolist/custom-main.css:673-720 (.ts-helpful-*)
  문구만 '좋아요'. 카운트 0이면 회색(is-zero), 1 이상이면 파란색.
--------------------------------------------*/
/* 알약형 배경·테두리 없이 아이콘 + 숫자만.
   좋아요만 박스가 없으면 글리프가 그대로 좌측 끝에 노출돼, 26px 박스 안에 중앙 정렬된
   다른 아이콘들보다 6px 더 왼쪽으로 튀어나온다. → 좌측 그룹에 같은 6px 광학 여백을 준다. */
#bo_v .cmt-action-list--left {
  padding-left: 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-btn 은 .cmt-wrap.cmt-chat(padding-left:58px) 안에 있으므로, 자신의 px-3 만 걷으면
   본문(.cmt-content padding-left:0)과 같은 58px 선에 정렬된다. (아바타 밑으로 당기지 않음) */
#bo_v .comment-card .cmt-wrap.cmt-chat .cmt-btn {
  padding-left: var(--cmt-inset) !important;
  margin-left: 0;
  padding-right: var(--cmt-inset) !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) */




/* ==========================================================
   bizevent — 이벤트 카드/폼 (skin/board/bizevent v1 에서 이식 후 토큰화)
   ========================================================== */

.be-list, .be-write {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
}
.be-list *, .be-write * { box-sizing: border-box; }
/* .be-write 만 자체 폭을 가진다 — .be-list 폭·여백은 아래 fb-wrap 스코프가 담당 */
.be-write {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 14px 60px;
}

/* ---------- 공통 버튼 ---------- */
.be-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 20px;
    border: 1px solid transparent; border-radius: var(--r-10);
    font-size: 14px; font-weight: 700; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.be-btn:hover { text-decoration: none; }
.be-btn-primary { background: var(--brand); color: #fff; }
.be-btn-primary:hover { background: var(--brand-hover); color: #fff; }
.be-btn-ghost { background: var(--card); border-color: var(--line-2); color: var(--body); }
.be-btn-ghost:hover { background: var(--field-bg); color: var(--ink); }

/* ---------- 배지 / 상태 ---------- */
.be-badge {
    display: inline-flex; align-items: center;
    height: 20px; padding: 0 7px;
    border-radius: 5px;
    font-size: 11px; font-weight: 800; line-height: 1;
}
.be-badge-pin { background: var(--be-indigo-soft); color: var(--be-indigo); padding: 0 6px; } /* 아이콘 전용 칩 — 텍스트('고정') 대신 핀 아이콘 */
.be-badge-pin .fa { font-size: 10px; }
.be-badge-hot { background: var(--be-red-soft); color: var(--be-red); }
/* 비공개 — 관리자/해당 업체 담당자에게만 노출된다 */
.be-badge-private { background: var(--be-orange-soft); color: var(--be-orange); }

/* 전 상태 무채색 통일 — 업체 상세 .vd-event-dday 와 동일 관례 (파일 상단 주석 참조) */
.be-status {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 9px;
    border-radius: var(--r-6);
    font-size: 12px; font-weight: 800; line-height: 1;
    background: var(--field-bg); color: var(--sub);
}

/* =========================================================
 * 목록 — 여백·정렬은 fb-wrap 스코프 (툴바·필터·카드 좌측 라인 20px 일직선)
 * ========================================================= */
#bo_list_wrap.fb-wrap .be-list {
    max-width: none;            /* v1 전체폭 잔재(1180px) 무력화 */
    padding: 0 20px;            /* 자유게시판 규칙 — 목록 섹션은 세로 여백 없음(툴바 하단 20px·페이징 상단 16px 이 간격 담당) */
}
/* 툴바 아래 구분선 — 자유게시판(.fb-list-head border-top)과 동일하게 좌우 패딩 안쪽 1px 라인 */
#bo_list_wrap.fb-wrap .be-list::before {
    content: ""; display: block; height: 1px;
    background: var(--fb-line);
    margin-bottom: 16px;
}

/* ---------- 카드 그리드 ----------
   PC 3열 (태블릿 2열 / 모바일 1열은 하단 미디어쿼리) */
.be-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    align-items: start; /* stretch 금지 — 텍스트 카드가 옆 썸네일 카드 높이만큼 늘어나 빈 흰 공간이 생긴다 */
}
/* totolist(.sbc-cl__card) 구조 미러 — 카드 외곽 박스 없음. 이미지가 카드 상단이고,
   흰 배경+테두리는 본문(.be-card-body)에만 붙는다 → 썸네일보다 큰 흰 박스가 안 생긴다 */
.be-card { position: relative; display: flex; flex-direction: column; }
.be-card:hover .be-card-body { border-color: var(--fb-bd-hover); }
.be-card.is-pin .be-card-body { border-color: var(--be-indigo-line); background: var(--be-pin-bg); }
/* 예정·종료 흐림 — opacity만 사용(콘텐츠는 DOM에 그대로, SEO 무영향) */
.be-card.is-ended,
.be-card.is-upcoming { opacity: .62; }

.be-card-link { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; color: inherit; }
.be-card-link:hover { text-decoration: none; color: inherit; }

/* 썸네일 — 있는 글만 출력(마크업 조건부), 4:3 풀블리드 + 상단 라운드 (toto .sbc-cl__img 미러) */
.be-card-thumb {
    position: relative; /* 뱃지 오버레이 기준 */
    width: 100%; aspect-ratio: 4 / 3; flex: none;
    border-radius: 14px 14px 0 0; overflow: hidden;
}
.be-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 뱃지 오버레이 — 이미지 위에서는 소프트 틴트가 안 읽혀 의미색 솔리드로 강조 */
.be-card-ovbadges { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 4px; }
.be-card-ovbadges .be-badge { box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
.be-card-ovbadges .be-badge-pin     { background: var(--be-indigo); color: #fff; }
.be-card-ovbadges .be-badge-hot     { background: var(--be-red); color: #fff; }
.be-card-ovbadges .be-badge-private { background: var(--be-orange); color: #fff; }

/* 본문 박스 — 텍스트 카드는 전체 라운드, 썸네일 카드는 이미지에 이어붙는 하단 라운드 */
.be-card-body {
    flex: 1 1 auto; min-width: 0; padding: 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    transition: border-color .15s;
}
.be-card.is-thumbed .be-card-body { border-top: 0; border-radius: 0 0 14px 14px; }
.be-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.be-card-co { color: var(--brand); font-size: 13px; font-weight: 800; }
/* 3열이라 카드 폭이 좁다 → 한 줄 말줄임 대신 2줄 line-clamp */
.be-card-title {
    margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.be-card-desc {
    margin: 0 0 8px; color: var(--sub); font-size: 13px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.be-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.be-card-period, .be-card-hit { color: var(--muted); font-size: 12.5px; }
.be-card-period { font-family: var(--font-num); } /* 날짜(숫자) 전용 폰트 — 한글('상시 진행')은 Paperozi 폴백 */

.be-empty, .be-empty-guide {
    padding: 60px 20px; text-align: center;
    border: 1px dashed var(--line-2); border-radius: 14px; background: var(--fb-hover-lift);
}
.be-empty-tit { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--body); }
.be-empty-txt { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }

/* 관리용 체크박스만 카드 <a> 바깥 절대배치 (분류 태그는 링크 없는 span 으로 메타 행에 인라인) */
.be-card-chk { position: absolute; top: 10px; left: 12px; z-index: 3; margin: 0; cursor: pointer; } /* 우측 상단은 뱃지 오버레이 자리 → 토토(sbc-cl__chk)처럼 좌측 */
.be-card-cmt { color: var(--sub); }

/* 공지 */
.be-notices { list-style: none; margin: 0 0 16px; padding: 6px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-10); }
.be-notice { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.be-notice-badge {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px; flex-shrink: 0;
    background: var(--be-red-soft); color: var(--be-red); border-radius: 5px; font-size: 11px; font-weight: 700;
}
.be-notice a { color: var(--ink); text-decoration: none; }
.be-notice a:hover { color: var(--brand); }

/* 기타 래퍼 */
.be-wrap { position: relative; }

/* =========================================================
 * 작성 폼 — totolist(_co_write_body.php) 룩 미러링 (be-w-*)
 * 상단바 → 2단 카드(좌 썸네일 미리보기 / 우 밑줄형 제목 + 셀형 정보표)
 * → 패널(에디터) → 패널(캡차+액션)
 * ========================================================= */
.be-req { color: var(--be-red); }
.be-help { width: 100%; margin: 2px 0 0; color: var(--muted-2); font-size: 12.5px; }

/* 상단바 */
.be-w-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding: 13px 18px; margin: 20px 0 16px;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-12);
}
.be-w-topbar-l { display: flex; align-items: center; gap: 13px; min-width: 0; }
.be-w-mark {
    width: 36px; height: 36px; flex: none; border-radius: var(--r-10);
    background: var(--brand); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.be-w-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.be-w-sub { margin-top: 1px; font-size: 12px; color: var(--muted-2); }
.be-w-prog { display: flex; align-items: center; gap: 8px; }
.be-w-prog-label { font-size: 12px; font-weight: 800; color: var(--brand); font-family: var(--font-num); }
.be-w-prog-track { width: 110px; height: 6px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.be-w-prog-fill { display: block; width: 0; height: 100%; border-radius: var(--r-pill); background: var(--brand); transition: width .2s; }

/* 2단 카드 */
.be-w-card {
    display: flex; gap: 18px; flex-wrap: wrap; padding: 18px;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-16);
    box-shadow: var(--sh-card);
}
.be-w-col-l { width: 320px; flex: none; max-width: 100%; }
.be-w-col-r { flex: 1; min-width: 260px; display: flex; flex-direction: column; }

/* 좌: 썸네일 미리보기 */
.be-w-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-12); overflow: hidden; background: var(--thumb-bg); }
.be-w-thumb-file { display: none; }
.be-w-thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.be-w-thumb-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 100%; margin: 0; padding: 0 12px; text-align: center; cursor: pointer;
    border: 2px dashed var(--line-strong); border-radius: var(--r-12); background: var(--field-bg);
    transition: border-color .15s, background-color .15s;
}
.be-w-thumb-empty .fa-camera { font-size: 26px; line-height: 1; color: var(--muted); transition: color .15s; }
.be-w-thumb-empty-t { font-size: 15px; font-weight: 800; color: var(--body); transition: color .15s; }
.be-w-thumb-empty-s { font-size: 12.5px; color: var(--muted-2); }
.be-w-thumb-empty:hover { border-color: var(--brand); background: var(--brand-soft); }
.be-w-thumb-empty:hover .fa-camera,
.be-w-thumb-empty:hover .be-w-thumb-empty-t { color: var(--brand); }
.be-w-thumb-actions { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 6px; }
.be-w-thumb-actions label, .be-w-thumb-actions button {
    display: inline-flex; align-items: center; margin: 0; border: none; cursor: pointer;
    padding: 5px 9px; border-radius: var(--r-6);
    background: rgba(0, 0, 0, .62); color: #fff; /* 이미지 위 반투명 오버레이 — 라이트/다크 공통이라 리터럴 허용 */
    font-size: 11px; font-weight: 700; font-family: inherit;
}
.be-w-thumb-hint {
    margin-top: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 5px;
    border: 1px solid var(--line-soft); border-radius: var(--r-10); background: var(--field-bg);
    font-size: 12px; color: var(--sub); line-height: 1.4;
}
.be-w-thumb-hint > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.be-w-thumb-hint .k { color: var(--muted-2); font-weight: 600; flex: none; }

/* 우: 밑줄형 제목 */
.be-w-tagline { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.be-w-tag { font-size: 13px; font-weight: 800; color: var(--brand); background: var(--brand-soft); border-radius: var(--r-6); padding: 4px 10px; }
.be-w-tagline .be-counter { margin-left: auto; }
.be-counter { flex: none; color: var(--muted-2); font-size: 12px; }
.be-counter b { color: var(--brand); font-weight: 800; }
.be-w-title-input {
    width: 100%; padding: 4px 4px 8px; outline: none;
    border: none; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: transparent;
    font-family: inherit; font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.4;
}
.be-w-title-input:focus { border-bottom-color: var(--brand); }
.be-w-title-input::placeholder { color: var(--muted-2); font-weight: 600; }

/* 우: 셀형 정보표 — overflow:hidden 금지(업체검색 드롭다운이 잘린다) → 라운드는 행에 개별 적용 */
.be-w-infotable { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: var(--r-10); }
.be-irow { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.be-irow:first-child, .be-irow:first-child .be-ilabel { border-radius: var(--r-10) 0 0 0; }
.be-irow:last-child { border-bottom: 0; }
.be-irow:last-child, .be-irow:last-child .be-ilabel { border-bottom-left-radius: var(--r-10); }
.be-ilabel {
    width: 92px; flex: none; align-self: stretch; display: flex; align-items: center;
    gap: 3px; /* flex 컨테이너는 텍스트-* 사이 공백을 무시한다 → 필수표시(*) 간격 확보 */
    padding: 11px 13px; background: var(--field-bg);
    font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.be-ival { flex: 1; min-width: 0; padding: 7px 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.be-w-input {
    flex: 1; min-width: 0; width: 100%; padding: 6px 4px; outline: none;
    border: none; background: transparent;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.be-w-input:focus { background-color: var(--card); box-shadow: inset 0 0 0 2px var(--brand); border-radius: var(--r-6); } /* background 축약형 금지 — .be-date 아이콘(background-image)이 지워진다 */
.be-w-input::placeholder { color: var(--muted-2); font-weight: 600; }
select.be-w-input { cursor: pointer; }
.be-irow--admin { background: var(--brand-soft); }

.be-readonly { display: flex; align-items: center; min-height: 28px; color: var(--body); font-size: 13.5px; font-weight: 700; }

.be-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.be-chip { display: inline-flex; cursor: pointer; }
.be-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.be-chip span {
    display: inline-flex; align-items: center; height: 32px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
    color: var(--body); font-size: 13px; font-weight: 600;
}
.be-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.be-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.be-period { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
/* 날짜 필드 — readonly + jQuery UI datepicker(script.js initDatePickers)로만 입력.
   우측에 미니멀 달력 아이콘(SVG data-uri — 토큰화 불가라 muted-2 리터럴, tw-scheme 관례) */
.be-date {
    flex: 1 1 0; min-width: 0; font-family: var(--font-num); cursor: pointer;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239AA0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 15px 15px;
}
.be-date { user-select: none; } /* readonly 텍스트 선택 하이라이트 방지 */
.be-period-sep { color: var(--muted-2); flex: none; }
.be-date:disabled { color: var(--muted-2); cursor: default; background-image: none; }

/* ---------- 기간 달력 재스킨 (jQuery UI datepicker) ----------
   스코프 = #ui-datepicker-div (jQuery UI 싱글턴 id) → CDN 테마 CSS 를 !important 없이 특이성으로 이긴다.
   이 파일은 bizevent 페이지에만 로드되므로 다른 화면의 datepicker 에는 영향 없음. */
#ui-datepicker-div.ui-datepicker {
    width: 264px; padding: 10px;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-12);
    box-shadow: var(--sh-md);
    font-family: inherit; font-size: 13px;
}
#ui-datepicker-div .ui-datepicker-header {
    background: none; border: 0; border-radius: 0;
    padding: 2px 0 8px; font-weight: 800; color: var(--ink);
}
#ui-datepicker-div .ui-datepicker-title { line-height: 28px; font-size: 14px; }
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    top: 4px; width: 26px; height: 26px; border: 0; background: none; cursor: pointer; border-radius: var(--r-6);
}
#ui-datepicker-div .ui-datepicker-prev { left: 4px; }
#ui-datepicker-div .ui-datepicker-next { right: 4px; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { background: var(--field-bg); border: 0; top: 4px; }
#ui-datepicker-div .ui-datepicker-prev:hover { left: 4px; }
#ui-datepicker-div .ui-datepicker-next:hover { right: 4px; }
#ui-datepicker-div table.ui-datepicker-calendar { margin: 0; font-size: 12.5px; }
#ui-datepicker-div .ui-datepicker-calendar th { padding: 4px 0; font-weight: 700; color: var(--muted-2); }
#ui-datepicker-div .ui-datepicker-calendar td { padding: 1px; }
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 30px; padding: 0; text-align: center;
    border: 0; border-radius: var(--r-8); background: none;
    color: var(--body); font-weight: 600; font-family: var(--font-num);
}
#ui-datepicker-div .ui-datepicker-calendar td .ui-state-hover { background: var(--field-bg); color: var(--ink); }
#ui-datepicker-div .ui-datepicker-calendar td .ui-state-highlight { background: var(--brand-soft); color: var(--brand); } /* 오늘 */
#ui-datepicker-div .ui-datepicker-calendar td .ui-state-active { background: var(--brand); color: #fff; }       /* 선택일 */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month a { color: var(--muted-2); font-weight: 500; }
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span { color: var(--line-strong); }

.be-check, .be-radio { display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; font-size: 13.5px; }
.be-radios { display: flex; gap: 14px; }

/* 업체 선택 — 클릭형 모달 (포인트전환(exchange) .ex-co/.ex-modal 이식, be-cm-*) */
.be-cm-unselected, .be-cm-selected { width: 100%; }
.be-cm-pick {
    appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
    border: 1.5px dashed var(--line-strong); border-radius: var(--r-10); background: var(--card);
    font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); line-height: 1.4;
    transition: border-color .15s, background .15s, color .15s;
}
.be-cm-pick:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--body); }
.be-cm-pick-txt { flex: 1 1 auto; min-width: 0; }
.be-cm-pick-arrow { flex: none; color: var(--muted-2); font-size: 15px; transition: color .15s, transform .15s; }
.be-cm-pick:hover .be-cm-pick-arrow { color: var(--brand); transform: translateX(2px); }
.be-cm-selected {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; min-height: 44px;
    background: var(--brand-soft); border: 1.5px solid var(--brand); border-radius: var(--r-10);
}
.be-cm-selected[hidden] { display: none; }
.be-cm-chip {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; font-weight: 700; color: var(--brand); line-height: 1.4;
}
.be-cm-chip::before { content: "\f00c"; font-family: FontAwesome; font-weight: 400; margin-right: 7px; }
.be-cm-actions { display: flex; gap: 6px; flex: none; }
.be-cm-btn {
    appearance: none; border: 1px solid var(--line-2); background: var(--card); cursor: pointer;
    padding: 5px 10px; border-radius: var(--r-8);
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--sub);
    transition: border-color .12s, color .12s;
}
.be-cm-btn:hover { border-color: var(--brand); color: var(--brand); }

.be-cm { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.be-cm[hidden] { display: none; }
.be-cm__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 30, .55); cursor: pointer; } /* exchange 모달과 동일 dim (blur 금지 관례) */
.be-cm__panel {
    position: relative; width: 100%; max-width: 400px; max-height: min(70vh, 560px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-16); box-shadow: var(--sh-md);
}
.be-cm__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft); flex: none; }
.be-cm__title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.be-cm__close {
    appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted-2); font-size: 16px; transition: color .12s, background .12s;
}
.be-cm__close:hover { color: var(--ink); background: var(--field-bg); }
.be-cm__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.be-cm__search { position: relative; flex: none; margin-bottom: 10px; }
.be-cm__search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: 13px; pointer-events: none; }
.be-cm__search-input {
    display: block; width: 100%; padding: 12px 14px 12px 38px;
    border: 1.5px solid var(--line-2); border-radius: var(--r-12); background: var(--field-bg);
    font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
    transition: border-color .15s, background .15s;
}
.be-cm__search-input:focus { outline: 0; border-color: var(--brand); background: var(--card); }
.be-cm__search-input::placeholder { color: var(--muted-2); }
.be-cm__hint { flex: none; padding: 6px 4px; text-align: center; font-size: 12px; color: var(--muted); }
.be-cm__hint[hidden] { display: none; }
.be-cm__list { list-style: none; margin: 0; padding: 4px 0 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.be-cm__item {
    padding: 12px 14px; border-radius: var(--r-10); cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--body); line-height: 1.4;
    transition: background .12s, color .12s;
}
.be-cm__item:hover { background: var(--field-bg); }
.be-cm__item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }

/* 패널 (에디터 / 액션) */
.be-w-panel {
    margin-top: 16px;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-16);
    box-shadow: var(--sh-card);
}
.be-w-panel-h { display: flex; align-items: center; gap: 8px; padding: 18px 22px 0; }
.be-w-bar { width: 3px; height: 15px; flex: none; border-radius: 2px; background: var(--brand); }
.be-w-panel-t { font-size: 15px; font-weight: 800; color: var(--ink); }
.be-w-panel-b { padding: 12px 22px 22px; }
.be-w-panel-b .wr_content { max-width: 100%; } /* overflow 지정 금지 — iframe 인라인 여백 몇 px 가 세로 스크롤바를 만든다 */
.be-w-panel-b .wr_content iframe { display: block; max-width: 100%; } /* cheditor iframe 모바일 안전망 */

.be-w-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 22px; }
.be-w-btns { display: flex; gap: 8px; margin-left: auto; }
.be-w-btns .be-btn { min-width: 130px; }

/* =========================================================
 * 반응형 (태블릿 → 모바일)
 * ========================================================= */
@media (max-width: 1024px) {
    .be-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .be-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .be-cards { grid-template-columns: 1fr; }

    .be-write { padding: 0 12px 40px; }

    .be-card-body { padding: 13px; }
    .be-card-title { font-size: 15px; }
    .be-card-desc { font-size: 12.5px; }
    .be-card-foot { gap: 8px; }

    .be-w-col-l { width: 100%; }
    .be-ilabel { width: 78px; }
    .be-period { flex-wrap: wrap; }
    .be-w-actions { flex-direction: column; align-items: stretch; }
    .be-w-btns { margin-left: 0; flex-direction: column-reverse; }
    .be-w-btns .be-btn { width: 100%; }
}

/* 목록 좌측 라인: 툴바(list.css .fb-toolbar)가 575px 에서 14px 로 줄어드는 데 맞춘다 */
@media (max-width: 575px) {
    #bo_list_wrap.fb-wrap .be-list { padding: 0 14px; }
}

/* ==========================================================
   bizevent 상세 — .bev-* (레이아웃 재구성)
   상단바(카드 밖) → 헤더 카드(작성자 + 2단 히어로) → 본문 카드(본문 + 추천 액션줄)
   색은 전부 아래 변수만 쓴다 → 다크모드는 변수 재선언 1블록으로 끝난다.
   ========================================================== */
.bev-shell {
  --bev-card: var(--card);
  --bev-bd: var(--line-2);
  --bev-ink: var(--ink);
  --bev-body: var(--body);
  --bev-mute: var(--muted);
  --bev-accent: var(--brand);
}
/* 다크 팔레트는 별도 토큰 도입 전까지 리터럴 유지 (DESIGN_SYSTEM.md §1 다크모드 현황) */
html.dark-mode .bev-shell {
  --bev-card: #1e1f23;
  --bev-bd: #2c2d32;
  --bev-ink: #f3f4f6;
  --bev-body: #d1d5db;
  --bev-mute: #9ca3af;
  --bev-accent: #60a5fa;
}

/* 루트는 더 이상 카드가 아니다 (카드 역할은 .bev-card 가 맡는다 — §1 구식 카드 규칙 삭제로 중화 속성 불필요) */
/* .na-top-sidemenu--view: 뷰에서 네비를 본문 카드 폭에 정렬 — 클래스는 head.php 부여 */
#bo_v.bev-shell,
.na-top-sidemenu--view {
  max-width: 900px;          /* 본문 폭 — 자유게시판 #bo_v 와 동일 (free-community/style.css) */
  margin-left: auto;
  margin-right: auto;
}
/* 본문 여백은 .bev-body 카드 패딩이 담당 (구식 #bo_v_con padding 규칙은 §3 에서 제거 완료) */
#bo_v.bev-shell #bo_v_con {
  color: var(--bev-body);
  line-height: 1.8;
}

.bev-card {
  background: var(--bev-card);
  border: 1px solid var(--bev-bd);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
}


/* ---------- (2) 헤더 카드 : 작성자 줄 ---------- */
.bev-author {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--bev-bd);
}
.bev-author .post-meta-list { gap: 0; }
.bev-stats {
  display: flex; align-items: center; gap: 14px; flex: none;
  color: var(--bev-mute); font-size: 14px;
  font-family: 'Oxanium', 'Paperozi', sans-serif;
}
.bev-stat { display: inline-flex; align-items: center; gap: 5px; }
.bev-stat .fa { font-size: 14px; }

/* ---------- (2) 헤더 카드 : 2단 히어로 ---------- */
.bev-hero {
  display: grid;
  /* 기본 표시 360×270 (권장 썸네일 600×450 의 60% — 업체 목록과 동일한 4:3, 고해상도 화면 대비 여유분). 반응형에서는 minmax(0,…) 로 자연 축소 */
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.bev-hero.is-noimg { grid-template-columns: minmax(0, 1fr); }
.bev-hero-left {
  /* 배경·테두리 없음 — 구 규격(투명 여백) 썸네일에서 이미지 밖까지 박스로 비쳐 보여 제거 (2026-07).
     라운드는 이미지 모서리에만 적용 */
  border-radius: 12px;
  overflow: hidden;
}
.bev-hero-left img { display: block; width: 100%; height: auto; }
.bev-hero-right { display: flex; flex-direction: column; min-width: 0; }

.bev-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.bev-badges:empty { display: none; }

.bev-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* 폰트테마가 #bo_v_title 을 !important 로 강제하므로 2-id + class 로 이긴다 */
#bo_v.bev-shell #bo_v_title {
  flex: 1 1 auto; min-width: 0;
  margin: 0 0 10px; padding: 0 !important;
  background: none !important; background-color: transparent !important;
  border-radius: 0;
  color: var(--bev-ink);
  font-size: 24px !important; font-weight: 800; line-height: 1.35; word-break: keep-all;
}
.bev-bookmark {
  flex: none; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bev-bd); border-radius: 9px;
  background: transparent; color: var(--bev-mute);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.bev-bookmark:hover { color: var(--bev-accent); border-color: var(--bev-accent); }

.bev-sub { margin: 0 0 16px; color: var(--bev-body); font-size: 15px; line-height: 1.6; }

/* 정보 테이블 — 업체명 / 진행 기간 (분류 행 없음, 분류는 상단 브레드크럼이 담당) */
.bev-table { margin: 0 0 18px; border-top: 1px solid var(--bev-bd); }
.bev-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--bev-bd);
}
.bev-row dt { flex: none; width: 88px; margin: 0; color: var(--bev-mute); font-size: 13px; font-weight: 700; }
.bev-row dd {
  margin: 0; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--bev-ink); font-size: 14px; font-weight: 600;
}
.bev-co-link { color: var(--bev-accent); font-weight: 800; text-decoration: none; }
.bev-co-link:hover { color: var(--bev-accent); text-decoration: underline; }
.bev-date { color: var(--bev-ink); font-family: 'Oxanium', 'Paperozi', sans-serif; }
.bev-cta { width: 100%; margin-top: auto; }

/* ---------- (3) 본문 카드 ---------- */
.bev-body { padding: 24px 20px 20px; }
/* 추천(도움이돼요) 버튼은 free-community 와 동일한 #bo_v_btn_group(§6 하단 액션줄)로 통일 — 구 .bev-good 제거 */

/* ---------- 반응형 (상세) ---------- */
@media (max-width: 767px) {
  .bev-card { padding: 16px 14px; border-radius: 12px; }
  .bev-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bev-author { align-items: flex-start; }
  .bev-body { padding: 18px 14px 16px; }
  #bo_v.bev-shell #bo_v_title { font-size: 20px !important; }
  .bev-row { align-items: flex-start; }
  .bev-row dt { width: 72px; padding-top: 2px; }
}

/* ==========================================================
   다크모드 — 목록 카드(be-*) + 작성 폼
   zinc 팔레트 리터럴 (.bev-shell 다크와 동일 계열:
   #1e1f23 / #2c2d32 / #26272b / #f3f4f6 / #d1d5db / #9ca3af / #60a5fa)
   의미색 soft 배경은 알파 틴트 관례 (아래 be-badge 다크 블록 참조).
   ========================================================== */

/* 상태 뱃지 — 무채색 zinc 칩 (라이트와 동일하게 전 상태 통일) */
html.dark-mode .be-status { background: #26272b; color: #9ca3af; }

/* 뱃지 */
html.dark-mode .be-badge-pin     { background: rgba(67, 56, 202, .28); color: #A5B4FC; }
html.dark-mode .be-badge-hot     { background: rgba(220, 38, 38, .20); color: #FCA5A5; }
html.dark-mode .be-badge-private { background: rgba(194, 98, 12, .20); color: #FDBA74; }

/* 카드 */
html.dark-mode #bo_list_wrap.fb-wrap .be-list::before { background: #2c2d32; } /* 툴바 아래 구분선 */
html.dark-mode .be-card-body { background: #1e1f23; border-color: #2c2d32; }
html.dark-mode .be-card:hover .be-card-body { border-color: #3f4046; }
html.dark-mode .be-card.is-pin .be-card-body { background: #26272b; border-color: rgba(99, 102, 241, .45); }
html.dark-mode .be-card-title { color: #f3f4f6; }
html.dark-mode .be-card-desc { color: #9ca3af; }
html.dark-mode .be-card-co { color: #60a5fa; }
html.dark-mode .be-card-period,
html.dark-mode .be-card-hit,
html.dark-mode .be-card-cmt { color: #9ca3af; }

/* 공지 */
html.dark-mode .be-notices { background: #1e1f23; border-color: #2c2d32; }
html.dark-mode .be-notice a { color: #d1d5db; }
html.dark-mode .be-notice a:hover { color: #60a5fa; }
html.dark-mode .be-notice-badge { background: rgba(220, 38, 38, .20); color: #FCA5A5; }

/* 빈 상태 */
html.dark-mode .be-empty,
html.dark-mode .be-empty-guide { background: #26272b; border-color: #2c2d32; }
html.dark-mode .be-empty-tit { color: #d1d5db; }
html.dark-mode .be-empty-txt { color: #9ca3af; }

/* 작성 폼 — totolist 룩(be-w-*). checked 칩은 다크 base 가 이기므로 명시 재선언 */
html.dark-mode .be-w-topbar,
html.dark-mode .be-w-card,
html.dark-mode .be-w-panel { background: #1e1f23; border-color: #2c2d32; box-shadow: none; }
html.dark-mode .be-w-title,
html.dark-mode .be-w-panel-t { color: #f3f4f6; }
html.dark-mode .be-w-prog-track { background: #26272b; }
html.dark-mode .be-w-thumb { background: #26272b; }
html.dark-mode .be-w-thumb-empty { background: #26272b; border-color: #3f4046; }
html.dark-mode .be-w-thumb-empty-t { color: #d1d5db; }
html.dark-mode .be-w-thumb-hint { background: #26272b; border-color: #2c2d32; color: #9ca3af; }
html.dark-mode .be-w-title-input { color: #f3f4f6; border-bottom-color: #3f4046; }
html.dark-mode .be-w-title-input:focus { border-bottom-color: #60a5fa; }
html.dark-mode .be-w-infotable,
html.dark-mode .be-irow { border-color: #2c2d32; }
html.dark-mode .be-ilabel { background: #26272b; color: #9ca3af; }
html.dark-mode .be-w-input { color: #f3f4f6; }
html.dark-mode .be-w-input:focus { background-color: #1e1f23; box-shadow: inset 0 0 0 2px #60a5fa; }
html.dark-mode select.be-w-input option { background: #1e1f23; color: #f3f4f6; }
html.dark-mode .be-readonly { color: #d1d5db; }
html.dark-mode .be-cm-pick { background: #1e1f23; border-color: #3f4046; color: #9ca3af; }
html.dark-mode .be-cm-pick:hover { border-color: #60a5fa; background: #26272b; color: #d1d5db; }
html.dark-mode .be-cm-btn { background: #1e1f23; border-color: #2c2d32; color: #9ca3af; }
html.dark-mode .be-cm-btn:hover { border-color: #60a5fa; color: #60a5fa; }
html.dark-mode .be-cm__panel { background: #1e1f23; border-color: #2c2d32; }
html.dark-mode .be-cm__head { border-color: #2c2d32; }
html.dark-mode .be-cm__title { color: #f3f4f6; }
html.dark-mode .be-cm__close:hover { color: #f3f4f6; background: #26272b; }
html.dark-mode .be-cm__search-input { background: #26272b; border-color: #2c2d32; color: #f3f4f6; }
html.dark-mode .be-cm__search-input:focus { border-color: #60a5fa; background: #1e1f23; }
html.dark-mode .be-cm__item { color: #d1d5db; }
html.dark-mode .be-cm__item:hover { background: #26272b; }
/* 기간 달력 다크 */
html.dark-mode #ui-datepicker-div.ui-datepicker { background: #1e1f23; border-color: #2c2d32; }
html.dark-mode #ui-datepicker-div .ui-datepicker-header { color: #f3f4f6; }
html.dark-mode #ui-datepicker-div .ui-datepicker-prev:hover,
html.dark-mode #ui-datepicker-div .ui-datepicker-next:hover { background: #26272b; }
html.dark-mode #ui-datepicker-div .ui-datepicker-calendar td a,
html.dark-mode #ui-datepicker-div .ui-datepicker-calendar td span { color: #d1d5db; }
html.dark-mode #ui-datepicker-div .ui-datepicker-calendar td .ui-state-hover { background: #26272b; color: #f3f4f6; }
html.dark-mode #ui-datepicker-div .ui-datepicker-calendar td .ui-state-active { background: var(--brand); color: #fff; }
html.dark-mode #ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span { color: #3f4046; }
html.dark-mode .be-chip span { background: #1e1f23; border-color: #2c2d32; color: #d1d5db; }
html.dark-mode .be-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }