@charset "utf-8";

/* =====================================================================
 * event.css — 승부처 이벤트(sbc_event) 전용 스타일 (.sbe-* 접두)
 * ---------------------------------------------------------------------
 * - tokens.css / style.css / list.css 는 무수정 (원본 diff 추적 용이)
 * - 하드코딩 hex 금지: 아래 상태 의미색 로컬 토큰 블록 1곳만 예외 (#nt_body 스코프
 *   — :root 선언 금지, 전역 크롬 누수 방지. skin/board/DESIGN_SYSTEM.md)
 * - 숫자는 --font-num(Oxanium), 카드 --r-16+--sh-card, 버튼 --r-6/12, 뱃지 --r-4/--r-pill
 * ===================================================================== */

/* ── 상태 의미색 로컬 토큰 (이 블록에서만 리터럴 허용) ── */
#nt_body{
  /* 상태 뱃지의 색 분기는 '진행중'(브랜드) 뿐이고 마감·예정은 이 중립색을 공유한다.
     그래서 상태별 색(open/closed/settled/upcoming) 토큰은 두지 않는다. */
  /* 뱃지(마감·예정) 솔리드 배경. 한 단 어두운 회색인 이유는 대비다 — 종전 #6b7280 위의 흰 글자는
     4.48:1 로 AA(4.5)에 아슬하게 못 미쳤고(뱃지 글자 13.6px 라 large-text 예외도 못 받는다),
     #4b5563 위 흰 글자는 7.1:1 이다.
     구 --sbe-neutral-soft(rgba .12)·구 --sbe-neutral(#6b7280)은 솔리드 전환으로 참조가 사라져 제거했다. */
  --sbe-neutral:#4b5563;
  --sbe-closing:#ea580c;       /* 마감 직전 카운트다운 강조 (뱃지 아님) */
  /* 고른 보기 칸의 면 — 브랜드 블루(사용자 확정).
     한때 채도를 낮춘 #3F70BE 를 썼다가 브랜드 원색으로 되돌렸다. 값을 여기 한 곳에 모아 두는 건
     이 색이 면·테두리·뱃지 글자 세 곳에 쓰여서다(톤을 다시 조정하면 이 줄만 고친다).
     흰 글자 대비 4.6:1 — 라벨 18px/600 기준 AA 를 넘는다. */
  --sbe-pick:var(--brand);
  --sbe-warn:#dc2626;          /* 정원 마감·필수 입력·예산 경고 (작성/관리 화면 위주) */
  --sbe-warn-soft:rgba(220,38,38,.10);
  /* --sbe-ok(초록) 제거 — 당첨 표시가 브랜드 톤으로 바뀌면서 마지막 소비처가 사라졌다.
     참여 화면에서 색이 뜻을 갖는 건 브랜드(정답·당첨) 하나다: 못 받은 두 상태(미당첨·지급 회수)는
     경고색이 아니라 같은 중립 회색을 쓴다(사용자 확정). --sbe-warn 은 폼·게이지 쪽에 남아 있다. */

  /* 분포 행 채움 — 트랙(--field-bg #f4f4f4) 위에서 확실히 구분돼야 해서
     --brand-soft(8%)보다 진하다. 그 위의 글자는 --ink 라 대비도 유지된다.
     채움색은 2단뿐: 중립(기본) / 브랜드(정답). '내 선택'은 채움을 바꾸지 않고 뱃지로만 알린다. */
  --sbe-fill:rgba(15,23,42,.08);
  --sbe-fill-answer:rgba(39,113,227,.18);

  /* 썸네일 플레이스홀더 (이미지 없을 때) — 단색 고정 (사용자 확정, 그라데이션 순환 폐기) + 카운트다운 칩 */
  --sbe-ph-bg:#f4f4f4;                 /* 플레이스홀더 배경 */
  --sbe-ph-ink:rgba(15,23,42,.22);     /* 플레이스홀더 아이콘 색 — 밝은 배경 위 회색 */
  --sbe-chip-bg:rgba(15,23,42,.78);    /* 썸네일 우상단 칩 배경 */
  --sbe-chip-ink:#fff;                 /* 칩 텍스트 */
}

/* ── 숫자 폰트 ── */
/* 숫자↔단위(명·P·%) 사이는 1px 이 이 스킨의 규약이다(2026-08-18, 사용자 확정).
   수치와 단위는 한 덩어리로 읽혀야 해서 붙이되, Oxanium 숫자의 좁은 side bearing 탓에
   완전히 0 이면 글자끼리 맞물려 보여 1px 만 남긴다.
   ⚠ 값을 바꿀 땐 여기 목록 전부를 함께 고칠 것 — .sbe-slots__head b · .sbe-slots__foot .sbe-num ·
     .sbe-rulen · .sbe-dist__stat .sbe-num · .sbe-opt__cnt .sbe-num · style.css .bo-v-info__val b */
#nt_body .sbe-num{ font-family:var(--font-num); font-weight:700; }

/* =====================================================================
 * 1. 목록
 * ---------------------------------------------------------------------
 * ⚠ 구 상태 필터탭(.sbe-tabs / .sbe-tab) 규칙 제거(2026-08-18) — 되살리지 말 것.
 *   전체·진행중·마감 탭이 정렬 드롭다운(.fb-sort-dropdown)의 항목으로 흡수돼
 *   마크업이 사라졌다. 상태 표시는 결과줄 라벨(.fb-total-count)이 맡는다.
 * ===================================================================== */

/* 툴바 위 여백 — 오버라이드 제거(2026-08-19). 되살리지 말 것.
   2026-08-18 에 상태 필터탭(#bo_cate 재사용)을 정렬 드롭다운으로 흡수하면서 마크업이 사라졌고,
   공유 list.css 의 `#bo_cate + .fb-toolbar{ padding-top:6px }` 이 매치되지 않아 기본 20px 로
   돌아갔다. 그때 "탭 자리에 빈 여백만 남는다"며 조건 없이 6px 로 눌러뒀는데, 결과적으로
   같은 스킨 계열에서 분류를 안 쓰는 자유게시판(free, .fb-toolbar 기본 20px)과 글쓰기 줄 위
   여백이 어긋났다 — 승부처이벤트만 답답해 보인다는 지적이 나왔다.
   → 이 보드도 공유 기본값 20px 을 그대로 쓴다. 분류를 안 쓰는 보드(bo_use_category=0)끼리
     상단 여백이 같아지고, 이 파일에 레이어가 하나 줄어든다. */

/* ── 목록 툴바 '내 참여 내역' 링크 ──
   생김새는 툴바 아이콘 버튼(.fb-icon-btn, list.css)을 그대로 입고 폭·패딩만 라벨용으로 푼다.
   list.css 는 free-community 와 byte-identical 인 공유 파일이라 이 보드 전용 규칙을 넣지 않는다
   (DESIGN_SYSTEM.md §8 — 공유 CSS 는 수동 복사 대상이라 한쪽만 고치면 드리프트가 난다).
   모바일에서도 라벨을 숨기지 않는다 — 라벨이 '참여 내역' 으로 짧아 좁은 화면에서도 툴바가 한 줄에 선다.
   아이콘만 브랜드색 — 글자는 툴바 다른 버튼과 같은 톤(.fb-icon-btn color)을 유지해 버튼 하나만 뜨지 않게 한다. */
#nt_body .sbe-mylink{
  width:auto; gap:6px; padding:0 12px; font-weight:600; white-space:nowrap;
}
#nt_body .sbe-mylink .fa{ color:var(--brand); }

/* =====================================================================
 * 2. 목록 — 카드 그리드
 * ===================================================================== */
/* 4열 — 썸네일이 4:3(본문 히어로와 같은 비율) 고정이라 이미지 높이는 카드 폭의 75% 다.
   3열이던 시절엔 그 높이가 카드 대부분을 먹어 목록이 늘어졌다. 비율을 눕히면 본문과 어긋나
   크롭이 생기므로, 크기는 열 수로만 조정한다(폭 ↓ → 높이 ↓).
   단계: 4열 → 991px 3열 → 767px 2열. 1열은 두지 않는다 — 폭 전체가 이미지가 되면
   4:3 에선 높이가 폭의 75% 라 화면을 덮는다(3열 시절의 문제가 모바일에서 재현된다). */
/* 툴바 아래 구분선 — 업체이벤트(bizevent/style.css .be-list::before)와 같은 관용구.
   border-top 이 아니라 ::before 1px 인 이유: 선이 목록 섹션(.fb-post-list)의 좌우 패딩
   '안쪽'에 들어가야 카드 첫 열의 시작선과 맞는다. border-top 은 패딩 바깥(상자 가장자리)에
   그어져 카드보다 좌우로 튀어나온다.
   ⚠ 공유 파일 list.css 의 `.fb-post-list.sbe-list{ border-top:0 }` 은 건드리지 않는다 —
     그건 ≤575px full-bleed 목록용 선을 끄는 예외이고(카드 그리드는 full-bleed 가 아니다),
     이 구분선과는 다른 선이다. 그 파일은 3보드 byte-identical 공유라 손대면 수동 복사가 따른다.
   아래 간격은 .sbe-grid 의 margin-top 이 이미 갖고 있다 — 여기서 margin-bottom 을 또 주면
   두 값이 더해져 툴바 쪽보다 아래가 넓어진다. */
#bo_list_wrap.fb-wrap .sbe-list::before{
  content:""; display:block; height:1px; background:var(--fb-line);
}
#nt_body .sbe-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:12px;
}
@media (max-width: 991px){ #nt_body .sbe-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 767px){ #nt_body .sbe-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; } }

#nt_body .sbe-card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-10); box-shadow:var(--sh-card); overflow:hidden;
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
#nt_body .sbe-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
/* 끝난 이벤트(마감·정산완료)는 톤을 낮춰 진행중 카드가 먼저 눈에 들어오게 한다.
   순수 표현 레이어만 건드린다 — DOM·제목·링크는 그대로라 크롤러가 받는 HTML 은 진행중 카드와 동일하다
   (display:none / visibility:hidden / 높이 0 / 배경과 같은 글자색 = 숨김·클로킹으로 읽힐 수 있어 쓰지 않음).
   구 opacity:.72 는 흰 배경과 섞여 '밝게 바래는' 느낌이라 톤 다운으로 읽히지 않았다.
   brightness 로 실제 명도를 내리고 grayscale 로 채도를 뺀다 — 카드가 어둡게 가라앉는다.
   투명도를 쓰지 않으므로 글자는 오히려 대비가 올라간다(흰 배경에 섞이지 않는다).
   커서를 올리면 원래 톤으로 복귀해 '죽은 카드'가 아니라 '지난 이벤트'로 읽힌다. */
#nt_body .sbe-card--settled, #nt_body .sbe-card--closed{
  filter:grayscale(.35) brightness(.93); transition:filter .15s;
}
#nt_body .sbe-card--settled:hover, #nt_body .sbe-card--closed:hover{ filter:none; }
#nt_body .sbe-card--settled .sbe-thumb, #nt_body .sbe-card--closed .sbe-thumb{
  filter:grayscale(.55); transition:filter .15s;
}
#nt_body .sbe-card--settled:hover .sbe-thumb, #nt_body .sbe-card--closed:hover .sbe-thumb{
  filter:none;
}
#nt_body .sbe-card__chk{ position:absolute; top:10px; right:10px; z-index:3; margin:0; }
#nt_body .sbe-card__link{ display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
#nt_body .sbe-card__link:hover{ text-decoration:none; }

/* ① 썸네일 (표시 전용 — 라운드 상단, 뱃지/칩 오버레이) */
/* 비율 4/3 — 썸네일 생성(list.skin.php get_list_thumbnail 640x480)·뷰 히어로(style.css
   .bo-v-hero__thumb)·작성폼 권장 사이즈(600x450)와 같은 값이라 잘리지 않는다.
   비율은 본문과 맞추는 게 우선이라 4:3 고정이고, 이미지가 커 보이는 문제는 비율이 아니라
   .sbe-grid 열 수(4열)로 잡는다. 구 2.3/1 가로배너는 원본 상하를 42% 잘라먹었다.
   바꾸려면 위 4곳을 함께 고칠 것. */
#nt_body .sbe-thumb{
  position:relative; aspect-ratio:4 / 3; background:var(--thumb-bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#nt_body .sbe-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#nt_body .sbe-thumb--ph{ background:var(--sbe-ph-bg); }
#nt_body .sbe-thumb__ic{ font-size:1.9rem; color:var(--sbe-ph-ink); }
/* 우상단 카운트다운/상태 칩 */
/* 글자가 칩 안에서 위로 떠 보이던 원인은 §3 .sbe-badge 와 같다 — 수치용 Oxanium(--font-num)에는
   한글이 없어 '마감됨/일반/마감까지'는 폴백(Paperozi)으로 그려지는데, 줄 상자는 첫 폰트(Oxanium)
   메트릭으로 잡히니 아래쪽에만 여백이 남아 글자가 위로 붙는다. 칩 문구는 수치가 아니라 글자이므로
   UI 폰트로 통일하고(카운트다운 칩의 --font-num 은 아래 §5 에서 히어로 전용으로 좁혔다),
   세로 정렬은 inline-flex 에 맡긴다(패딩 땜질 금지).
   라운드는 pill 대신 --r-6 — 썸네일 모서리(카드 상단 라운드)와 같은 계열의 살짝 둥근 사각. */
#nt_body .sbe-thumb__chip{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sbe-chip-bg); color:var(--sbe-chip-ink);
  border-radius:var(--r-6); padding:5px 11px;
  font-size:.7rem; font-weight:700; font-family:var(--font-ui); line-height:1; white-space:nowrap;
}
/* 칩은 기본 다크 통일(사용자 확정). 예외 하나 — 마감임박(진행중 + 잔여 24시간 이하, list.skin.php 서버 계산)은
   배경은 다른 칩과 똑같이(--sbe-chip-bg 다크 반투명) 두고 «글자와 점만 빨강»으로 — 목록에서 '지금 안 하면
   놓친다'가 읽히되 칩 톤은 하나로 유지한다(2026-09-12 사용자 확정: 빨간 배경 시안 → 배경 통일·글자 빨강).
   글자색은 --sbe-warn(#dc2626)이 아니라 한 단계 밝은 #ef4444 — 어두운 반투명 위에서 #dc2626 은 가라앉아
   .7rem 굵은 글자가 흐려진다. 점은 currentColor 라 글자와 같은 색.
   진행중 카운트다운 칩은 같은 날 제거 — 열려 있는 이벤트는 임박 전까지 썸네일에 아무것도 얹지 않는다.
   앞의 ● 점은 글자 앞 작은 표식 — 이미지 위에서 배지가 '상태'임을 한 번 더 알린다(애니메이션 없음).
   점의 translateY(-.75px): 칩은 line-height:1 + align-items:center 라 점은 칩 정중앙에 놓이지만 UI 폰트의
   한글 잉크는 em 상자 중앙보다 .75px 위에 찍힌다(2x 스크린샷 실측: 점 중심 41.5 · 글자 잉크 중심 40.0).
   그래서 점을 잉크 중심으로 올린다 — 글자 쪽을 내리면 다른 칩(마감됨·일반)과 기준선이 달라진다. */
#nt_body .sbe-thumb__chip--urgent{
  color:#ef4444; gap:5px;
}
#nt_body .sbe-thumb__chip--urgent::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9;
  transform:translateY(-.75px);
}

/* ②~④ 카드 본문 */
#nt_body .sbe-card__body{ display:flex; flex-direction:column; gap:10px; padding:14px 16px 13px; flex:1; }
/* 제목은 한 줄 — 넘치면 우측을 '…' 로 자른다(사용자 확정, 2026-08-18).
   구 2줄 클램프(-webkit-line-clamp:2)는 제목 길이에 따라 카드 높이가 1줄/2줄로 갈려
   같은 행의 카드들이 들쭉날쭉했다. 한 줄로 고정하면 카드 높이가 제목 길이와 무관해진다.
   표준 3종 세트(nowrap + overflow + text-overflow)로 바꿨다 — 1줄에는 -webkit-box 가
   필요 없고, 그 방식은 벤더 접두 속성 3개에 얹혀 있다.
   ▶ 2줄로 되돌리려면: display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
     (그때는 white-space:nowrap 을 반드시 빼야 한다 — 남기면 줄바꿈이 막혀 1줄로 그려진다) */
#nt_body .sbe-card__title{
  /* 2026-09-12 목록 제목 +1px(사용자 지시). html{font-size} 가 PC 14/모바일 15 라 rem 을 px 로 바꾸면
     한쪽만 커지므로 calc(.98rem + 1px) — 양쪽 뷰포트에서 정확히 1px 만 오른다(PC 13.72→14.72). */
  font-size:calc(.98rem + 1px); font-weight:700; color:var(--ink); margin:0; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 지급액 + 보상방식 한 줄. 폭이 모자라면 보상방식을 '통째로' 아랫줄로 내린다(사용자 확정).
   flex-wrap 없이 두면 flex 아이템이 줄어들면서 글자가 칸 안에서 꺾여 '보상방 / 식'처럼
   낱말 중간이 갈렸다 — 아래 .sbe-card__ruledesc 의 nowrap 과 한 쌍이어야 효과가 난다
   (nowrap 만 있으면 넘치고, wrap 만 있으면 여전히 낱말이 갈린다).
   row-gap 2px — 두 줄로 나뉘어도 지급액과 보상방식은 한 덩어리로 읽혀야 한다(열 간격 8px 과 별개). */
#nt_body .sbe-card__pointline{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; margin-top:auto;
}
#nt_body .sbe-card__point{ font-size:1.35rem; color:var(--brand); font-weight:800; line-height:1.1; }
/* nowrap — 이 문구는 쪼개지지 않는 한 덩어리다(위 pointline 주석 참조) */
#nt_body .sbe-card__ruledesc{ font-size:.92rem; color:var(--muted); white-space:nowrap; }
/* 보상 방식 설명(sbe_rule_desc)의 인원 수 — 목록 카드·뷰 정보표 두 곳에 같이 걸린다.
   왼쪽만 3px: Oxanium 숫자는 좌우 여백이 한글 폰트보다 좁아 '선착순1,000'처럼 앞말과 뭉친다.
   뒤쪽('명')은 붙여 둔다(사용자 확정) — 수치와 단위는 한 덩어리로 읽히는 편이 자연스럽다.
   앞쪽 공백 문자는 문자열에 그대로 두고 여백만 더한다 — CSS 가 안 실리는 상황에서도 단어가
   붙지 않게 하기 위함이다. */
#nt_body .sbe-rulen{ margin:0 1px 0 3px; }
/* 굵기는 목록 카드에서만 문장을 따른다(.sbe-num 기본값 700 해제).
   그 줄은 흐린 보조 문장이라 숫자만 700 이면 색이 같은데도 그 부분만 진해 보인다
   (style.css .bo-v-info__sub b 가 같은 이유로 inherit 한다 — 같은 판단의 반복).
   뷰 정보표(.bo-v-info__val)에서는 되돌리지 않는다: 그 칸은 숫자가 700 인 게 규칙이다. */
#nt_body .sbe-card__ruledesc .sbe-num{ font-weight:inherit; }
/* 'N명 참여' + 'CTA' 한 줄. 위 .sbe-card__pointline 과 같은 처리 —
   폭이 모자라면 CTA 를 통째로 아랫줄로 내린다. 2열 그리드(≤767px)에서 카드 안쪽 폭이
   100px 대까지 좁아지는데, 참여 수가 네 자리(1,000명)가 되면 좌우 합이 그 폭을 넘는다.
   flex-wrap 없이 두면 아이템이 줄어들며 '참여하 / 기 →' 처럼 낱말 중간이 갈린다.
   nowrap 과 한 쌍이어야 효과가 난다(한쪽만 두면 넘치거나 여전히 갈린다). */
#nt_body .sbe-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:2px 8px;
  border-top:1px solid var(--line-soft); padding-top:10px;
}
#nt_body .sbe-card__joins{ font-size:.8rem; color:var(--muted); white-space:nowrap; }
#nt_body .sbe-card__cta{ font-size:.84rem; font-weight:700; white-space:nowrap; }
#nt_body .sbe-card__cta.is-link{ color:var(--brand); }
#nt_body .sbe-card__cta.is-muted{ color:var(--muted); font-weight:600; }

/* =====================================================================
 * 3. 상태 뱃지 (뷰 히어로 썸네일 좌상단 오버레이 — 위치는 style.css .bo-v-hero__badge)
 * ---------------------------------------------------------------------
 * 색 분기는 '진행중' 하나뿐이다: 지금 참여할 수 있다는 사실만 색을 쓸 값어치가 있다.
 * 마감·예정은 중립 회색을 공유한다(상태별 색 팔레트를 되살리지 않는다).
 * 배경은 솔리드다 — 사진 위에 얹히므로 반투명 틴트로는 글자가 묻힌다.
 * ===================================================================== */
/* 글자가 배경 안에서 위로 뜨던 원인은 폰트였다 — 부모(.bo-v-info__val)가 style.css §10 에서
   수치용 Oxanium 을 통째로 물려주는데, Oxanium 에는 한글이 없어 '진행중/마감'은 폴백(Paperozi)으로
   그려진다. 줄 높이는 첫 폰트(Oxanium) 메트릭으로 잡히고 글자는 폴백 글꼴로 앉으니 기준선이 어긋난다.
   이 뱃지는 수치가 아니라 글자이므로 UI 폰트(--font-ui)로 되돌린다.
   inline-flex + line-height:1 은 세로 가운데 정렬을 flex 에 맡기기 위한 것(패딩 땜질 금지). */
#nt_body .sbe-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:var(--r-4);
  font-family:var(--font-ui);
  font-size:.85rem; font-weight:700; line-height:1; white-space:nowrap;
  /* 솔리드 배경 — 이 뱃지는 뷰 히어로 썸네일 위(.bo-v-hero__badge)에 얹힌다.
     구 soft 틴트(rgba .12)는 88% 투명이라 사진이 그대로 비쳐 글자가 묻혔다. */
  background:var(--sbe-neutral); color:#fff;
}
/* 진행중만 브랜드 톤(사용자 확정) — '지금 참여할 수 있다'가 이 화면에서 유일하게 색이 필요한 정보다.
   마감·예정은 기본 회색을 그대로 쓴다(상태별 색 팔레트를 되살리지 않는다). */
#nt_body .sbe-badge.is-open{ background:var(--brand); color:#fff; }

/* =====================================================================
 * 4. 자리 현황 (firstN — 선착순)
 *    구 .sbe-gauge(한 줄 막대) 제거 — 눈금형으로 교체했고 --mini 변형은 쓰는 곳이 없었다.
 * ===================================================================== */
#nt_body .sbe-slots{ margin-bottom:16px; }
/* 머리줄·발치 줄은 같은 표기 규약 — 라벨(단위 설명)은 작게, 수치만 크고 진하게.
   라벨 굵기 500 을 명시하는 이유: 상속값(400)에 기대면 상위 규칙이 바뀔 때 두 줄이 조용히 갈린다. */
#nt_body .sbe-slots__head{ font-size:15px; font-weight:500; color:var(--sub); margin-bottom:10px; }
#nt_body .sbe-slots__head b{ font-size:26px; font-weight:700; color:var(--ink); margin:0 1px; }
/* 눈금 — 칸을 실제 요소로 찍는다(그라데이션 줄무늬 아님): 칸마다 라운드가 살아야 시안의
   캡슐 모양이 나오고, 채운 칸 수를 서버가 정확히 통제할 수 있다.
   flex + 같은 비율이라 칸 수를 바꿔도 폭 계산이 필요 없다. */
#nt_body .sbe-slots__bar{ display:flex; gap:4px; }
/* 높이 > 폭 = 세로 막대. 폭은 flex 가 균등 분배하므로 칸 수(50, sbc_event.lib.php $seg_n)가
   비율을 정하고, 높이는 여기서 잡는다. 라운드는 폭의 절반에 가깝게 둬야 캡슐로 보인다.
   ⚠ 칸 수를 바꾸면 이 높이·라운드도 함께 봐야 한다(폭이 달라져 가로세로비가 바뀐다). */
#nt_body .sbe-slots__seg{
  flex:1 1 0; height:30px; border-radius:var(--r-6);
  background:var(--field-bg); transition:background .3s;
}
#nt_body .sbe-slots__seg.is-on{ background:var(--ink); }
/* 정원이 다 차면 눈금 전체가 브랜드색 — 남은 자리 0 을 숫자로만 알리면 놓치기 쉬워 색으로도
   알린다. 경고색(--sbe-warn)이 아닌 이유(사용자 확정): 정원 소진은 사고가 아니라 이벤트가
   끝까지 간 정상 결과라, 빨강은 잘못된 상태처럼 읽힌다. */
#nt_body .sbe-slots.is-full .sbe-slots__seg.is-on{ background:var(--brand); }
/* 발치 줄 — 좌: 참여 수 / 우: 마감률. 눈금이 말하는 값을 숫자로 한 번 더 못박는다. */
#nt_body .sbe-slots__foot{
  display:flex; justify-content:space-between; gap:10px;
  margin-top:10px; font-size:15px; font-weight:500; color:var(--sub);
}
/* 굵기 600 — .sbe-num 기본값이 700 이라 이 자리에서만 한 단 낮춘다(발치 줄은 보조 수치다).
   margin 은 머리줄 수치(b)와 같은 2px — 숫자와 단위가 붙어 한 덩어리로 뭉치지 않게. */
#nt_body .sbe-slots__foot .sbe-num{ font-size:16px; font-weight:600; color:var(--body); margin:0 1px; }
@media (max-width: 575px){
  /* 칸이 좁아지면 라운드가 뭉개진다 — 칸 수를 줄일 수 없으니(서버 렌더) 높이와 간격만 줄인다 */
  #nt_body .sbe-slots__bar{ gap:2px; }
  #nt_body .sbe-slots__seg{ height:24px; border-radius:var(--r-4); }
  #nt_body .sbe-slots__head b{ font-size:23px; }
}

/* =====================================================================
 * 5. 뷰 위젯
 * ===================================================================== */
/* ── 섹션 — 뷰의 '이벤트 설명'(본문)·'이벤트 참여'(위젯) 공용 ──
   totolist 상세(view-detail.css .vd-card)와 같은 방식: 카드 chrome 없이 풀블리드 섹션 +
   아래 구분선. #bo_v 자체가 이미 카드라 그 안에 또 테두리 카드를 겹치지 않는다.
   두 블록이 이 정의 하나를 공유한다 — .sbe-widget 은 event.js 훅 전용으로만 남기고
   생김새는 전부 .sbe-panel 이 소유(같은 섹션을 두 번 정의하지 않기 위함).
   좌우/상하 패딩은 style.css §14 섹션 목록(var(--fb-pad))이 단독으로 담당한다.
   구분선 = 구조선 티어 var(--line-2) — 히어로 아래선·댓글 위선과 같은 색(§15 위계). */
#nt_body .sbe-panel{
  border-bottom:1px solid var(--line-2);
}
/* 마지막 패널은 구분선을 내지 않는다 — 바로 뒤 #viewcomment 가 이미 자기 border-top 을 갖고 있어
   같은 색 1px 두 줄이 맞붙어 2px 처럼 보였다. (.sbe-panel 이 없는 자유게시판·먹튀정보는 원래 한 줄)
   :last-child 가 아니라 :last-of-type 인 이유 — #bo_v_atc 의 마지막 자식은 위젯이 아니라
   <script src="event.js"> 다. script 도 엘리먼트라 :last-child 를 가져가 규칙이 통째로 죽는다.
   :last-of-type 은 같은 태그(div)끼리만 따지므로 script 를 무시한다.
   추천버튼(#bo_v_btn_group)이 켜지면 그게 마지막 div 라 이 규칙이 풀리고 패널↔버튼 구분선이
   유지된다 — 그때는 두 선이 떨어져 있어 두꺼워 보이지 않는다. */
#nt_body .sbe-panel:last-of-type{
  border-bottom:0;
}

/* 섹션 제목 — 구성(4px 브랜드 바 + 타이틀)은 totolist .vd-card-head/.vd-bar 미러링.
   크기·굵기·색은 같은 화면의 다른 섹션 제목인 '댓글 N'(style.css §17)과 맞춘다. */
#nt_body .sbe-panel__head{
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
}
#nt_body .sbe-panel__bar{ flex:0 0 auto; width:4px; height:20px; border-radius:2px; background:var(--brand); }
#nt_body .sbe-panel__title{
  margin:0; font-size:calc(1rem + 4px); font-weight:600; color:var(--ink); line-height:1.4;
}

/* 이벤트 설명 = 본문(#bo_v_con) 섹션. 짧은 본문에 200px 빈칸이 남지 않게 해제 */
#nt_body .sbe-desc #bo_v_con{ min-height:0; }

/* 보상 배너(.sbe-banner)는 히어로 정보표(style.css §2-1 .bo-v-info)로 대체되어 제거됨.
   상태·보상 방식·지급 포인트·참여 인원·마감이 전부 히어로로 이동 — 중복 레이어를 남기지 않는다. */
/* 수치 폰트는 히어로 정보표에 놓인 카운트다운에만 — 썸네일 칩(.sbe-thumb__chip)의 카운트다운은
   '마감까지 …' 한글이 앞에 붙는 혼합 문자열이라, Oxanium 줄 상자 + 한글 폴백 조합이 세로 정렬을
   깬다(§2 ① 칩 주석). 칩은 UI 폰트로 통일. */
/* 크기는 지급 포인트(.bo-v-info__point 24px)와 나란히 놓이는 첫 줄 값이라 그에 맞춰 키운다.
   같은 24px 은 아니다 — 'N일 HH:MM:SS' 는 글자 수가 많아 좁은 칸에서 줄바꿈된다. */
#nt_body .bo-v-info__val .sbe-cd{ font-family:var(--font-num); font-weight:700; font-size:20px; }
/* 카운트다운 색상은 놓인 배경별로 분리 —
   .sbe-cd 자체에 색을 주면 같은 특이성의 후순위 선언이라 썸네일 다크 칩(.sbe-thumb__chip)의
   흰 글자를 덮어써 "다크 배경 + 어두운 글자"가 된다(가독성 사고 전례). 칩 위에서는 항상
   --sbe-chip-ink 흰색 유지, 상태색 연출은 밝은 배경인 히어로 정보표에서만. */
#nt_body .bo-v-info__val .sbe-cd{ color:var(--ink); }
#nt_body .bo-v-info__val .sbe-cd.is-closing{ color:var(--sbe-closing); }
#nt_body .bo-v-info__val .sbe-cd.is-ended{ color:var(--muted-2); }

/* 참여 본문(.sbe-body)에는 규칙이 없다 — 여백은 섹션(.sbe-panel = style.css §14 var(--fb-pad)),
   폭은 무제한이 정답이라서다. 섹션 제목·본문·분포막대·댓글이 전부 같은 좌측 축에 서야 한다
   (한때 넣었던 640px 중앙 컬럼은 제목만 섹션 끝에 남고 내용이 안쪽으로 밀려 축이 어긋났다). */
/* 질문 = 참여 영역의 주인공. 섹션 제목('이벤트 참여' calc(1rem+4px))과 같은 크기까지만 올린다
   — 더 키우면 자기를 담은 섹션 제목보다 커져 위계가 뒤집힌다. 보기(1.05rem)와는 굵기+크기 두 단계 차 */
/* 색은 --body(본문 기본) — 한 단 위인 --ink(제목/최강조)는 이 패널에서 과했다.
   이 줄이 문단이 아니라 질문이라 크기·굵기로 이미 서 있고, 색까지 최강조면 눌린다. */
#nt_body .sbe-question{ font-size:1.25rem; font-weight:600; color:var(--body); line-height:1.45; margin-bottom:16px; }

/* 보기 (참여전) — 공통 뼈대.
   ⚠ .sbe-opt 는 항상 .sbe-opts--plain 안에서만 렌더된다(렌더러가 그 컨테이너 하나만 찍는다).
     아래 --plain 블록이 면·방향·여백을 덮으므로, 여기 남는 실제 담당은 최소 높이·테두리 두께·
     라운드·글자 크기·transition 이다. 여기서 배치를 다시 손보지 말 것 — --plain 과 두 벌이 된다. */
#nt_body .sbe-opts{ display:flex; gap:10px; margin-bottom:16px; }
/* --row/--col(가로 1줄 / 세로 목록) 규칙 제거 — 보기가 있는 유형은 전부 --plain 격자 배치를
   쓰도록 통일했다(2026-08-18). 렌더러가 그 클래스를 더 이상 붙이지 않으므로 남기면 고아 규칙이다. */
#nt_body .sbe-opt{
  display:flex; align-items:center; gap:9px; min-height:52px; padding:11px 16px; margin:0;
  border:1px solid var(--line); border-radius:var(--r-12); cursor:pointer;
  font-size:1.05rem; color:var(--body); background:var(--card);
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
#nt_body .sbe-opt:hover{ border-color:var(--brand); background:var(--brand-soft); color:var(--ink); }
#nt_body .sbe-opt input{ accent-color:var(--brand); flex:0 0 auto; }
/* 선택됨 — 기존엔 네이티브 라디오 점만 차서 어느 보기를 골랐는지 한눈에 안 들어왔다 */
#nt_body .sbe-opt:has(input:checked){
  border-color:var(--brand); background:var(--brand-soft); color:var(--brand);
  font-weight:700; box-shadow:inset 0 0 0 1px var(--brand);
}
/* ⚠ 구 `.sbe-opt:focus-within` 포커스 링 제거(2026-08-18) — 되살리지 말 것.
   :focus-within 은 마우스 클릭에도 걸린다. 체크박스(복수선택)를 눌렀다 다시 눌러 해제해도
   input 은 계속 포커스를 쥐고 있어 파란 링(3px)이 그대로 남았다 — '선택을 껐는데 파란 띠가
   남는' 증상의 원인. 게다가 box-shadow 는 하나뿐이라 이 링이 선택 상태의 안쪽 링을 밀어냈다.
   포커스 표시는 아래 --plain 블록의 `:has(input:focus-visible)` 하나가 담당한다
   (:focus-visible 은 키보드 이동에만 반응 → 마우스로는 잔흔이 생기지 않는다). */
/* 동그라미는 --plain 칸에서 화면에서만 감춘다(정의는 아래 예측형 블록) —
   display:none 은 금지: 접근성 트리에서 사라져 키보드 이동·스크린리더 낭독이 끊기고,
   포커스를 못 받으니 :has(input:focus-visible) 링도 영영 안 뜬다. */
@media (max-width: 575px){
  #nt_body .sbe-opts{ gap:8px; }
}
/* 질문·게이지와 참여 폼 사이 간격 (질문의 margin-bottom 과 상쇄돼 중복 여백은 생기지 않는다) */
#nt_body .sbe-form{ margin-top:16px; }

/* 주관식/숫자 입력 */
#nt_body .sbe-input-row{ display:flex; gap:8px; margin-bottom:16px; }
/* 높이 50px = 옆에 붙는 .sbe-btn--join 과 동일 (주관식/숫자는 입력+버튼이 한 줄) */
#nt_body .sbe-input{
  flex:1; height:50px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-12);
  font-size:1.05rem; color:var(--ink); background:var(--card);
}
#nt_body .sbe-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--field-focus-ring); }

/* 버튼
   크기(50px / 20px)는 참여 영역이 쓰는 한 자리의 공통값이다 — 참여 CTA(.sbe-btn--join),
   상태 안내('마감되었습니다'·'정원이 마감되었습니다'·'시작 전'), 그리고 참여 후 그 자리에
   놓이는 결과 줄(.sbe-mine__head 20px)이 전부 같은 자리에 번갈아 선다. 하나만 작으면
   상태가 바뀔 때 화면이 들썩이고, 안내 문구가 결과 문구보다 덜 중요해 보인다.
   ⚠ 작성 폼 버튼(.sbe-w-btns .sbe-btn)은 자기 크기를 따로 갖는다 — 저 규칙이 이 값을 덮는다. */
#nt_body .sbe-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 22px; border:none; border-radius:var(--r-12);
  font-size:20px; font-weight:700; cursor:pointer; transition:all .15s;
  background:var(--field-bg); color:var(--muted);
}
#nt_body .sbe-btn--block{ display:flex; width:100%; }
#nt_body .sbe-btn:disabled{ cursor:not-allowed; }
/* 참여 CTA — 카드에서 유일한 채움 버튼. 크기(50px/20px)는 기본 규칙이 이미 갖고 있으므로
   여기서 다시 선언하지 않는다(같은 값 두 벌 금지 — 한쪽만 고치면 자리가 어긋난다).
   채움색은 무채색(--ink) — 이 화면에서 파란색은 '정답' 전용이라 CTA 까지 브랜드색을 쓰면
   같은 색이 두 뜻을 갖는다. 잉크색 채움은 채도 없이도 화면에서 가장 진한 면이라 CTA 로 선다. */
#nt_body .sbe-btn--join{ background:var(--ink); color:#fff; }
/* 보기 선택 전('선택하세요')에는 채움을 벗고 기본 버튼 모습으로 돌아간다 —
   잠긴 버튼이 진한 채움이면 눌리는 것으로 읽힌다. 전송 중(.is-loading)은 제외:
   그때는 이미 고른 상태라 채움을 유지해야 진행 중으로 보인다. */
#nt_body .sbe-btn--join:disabled:not(.is-loading){
  background:var(--field-bg); color:var(--muted); box-shadow:none;
}
/* hover 는 한 단 옅은 잉크(--body) — 채움 버튼이라 밝아지는 쪽이 눌림 전 예고로 읽힌다 */
#nt_body .sbe-btn--join:not(:disabled):hover{ background:var(--body); box-shadow:var(--sh-sm); }
#nt_body .sbe-btn--join.is-loading{ opacity:.6; }
/* .sbe-btn--ghost 제거 — 유일한 사용처였던 비회원 전용 '로그인 후 참여하기' 버튼이 없어졌다.
   비회원도 같은 참여 폼을 보고, 로그인 유도는 참여 시도 시 안내창이 담당한다. */

/* 분포 — 참여 영역(보기 버튼/폼·내 참여) 아래에 놓인다(렌더 순서는 sbc_event.lib.php).
   그래서 여백은 위쪽에 준다. 아래는 푸터(.sbe-foot margin-top:16px)가 이어받는다. */
/* 흰 박스(사용자 확정) — #bo_v·섹션이 이미 흰 표면이라 배경만으론 경계가 안 생긴다.
   --line 실선이 형태를 만든다(.sbe-opt 와 같은 방식). 그림자는 넣지 않는다 —
   카드 안의 내부 블록이라 --sh-card 까지 얹으면 층이 하나 더 생긴다. */
#nt_body .sbe-dist{
  display:flex; flex-direction:column; gap:8px; margin-top:16px;
  padding:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-12);
}
/* 행 채움형 — 행 자체가 트랙(--field-bg)이고 그 위를 막대가 채운다. 테두리는 두지 않는다:
   회색 트랙이 이미 경계라 선까지 더하면 상자가 이중이 된다(흰 박스 안이라 더 그렇다).
   0% 여도 회색 행이 남아 '보기는 있는데 아무도 안 골랐다'가 그대로 읽힌다. */
#nt_body .sbe-dist__row{
  position:relative; overflow:hidden; padding:11px 14px;
  background:var(--field-bg); border-radius:var(--r-10);
}
#nt_body .sbe-dist__bar{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--sbe-fill); transition:width .3s;
}
/* 채움색은 정답만 담당한다(브랜드 톤, 사용자 확정 — 초록 폐기).
   '내 선택'은 채움·배경을 건드리지 않고 라벨 옆 뱃지로만 알린다: 색은 한 뜻만 갖는다. */
#nt_body .sbe-dist__row.is-answer .sbe-dist__bar{ background:var(--sbe-fill-answer); }
/* 라벨(가변, 길면 말줄임) → 정답 뱃지(고정) → 수치(오른쪽 끝, margin-left:auto).
   space-between 을 쓰지 않는 이유는 정답 뱃지가 라벨 바로 옆에 붙어야 해서다. */
#nt_body .sbe-dist__fg{ position:relative; z-index:1; display:flex; align-items:baseline; gap:8px; }
/* 라벨은 참여전 보기(.sbe-opt)와 같은 텍스트라 참여 후 글자가 작아져 보이지 않게 함께 올린다
   (보기 1.15rem 대비 한 단 낮게 — 여기선 읽는 대상이 텍스트가 아니라 비율이다) */
/* 채움 위에 얹히는 글자 — 채운 쪽/안 채운 쪽 어디에 걸쳐도 읽혀야 하므로 --body 이상으로 유지 */
#nt_body .sbe-dist__label{
  flex:0 1 auto; min-width:0; font-size:1rem; color:var(--body); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#nt_body .sbe-dist__row.is-answer .sbe-dist__label{ color:var(--ink); font-weight:700; }
#nt_body .sbe-dist__stat{ margin-left:auto; flex:0 0 auto; font-size:.92rem; color:var(--sub); white-space:nowrap; }
/* 수치(%·인원)는 둘 다 숫자폰트. 갈리는 건 크기와 톤 —
   %만 한 단 크고 진하다(이 행에서 실제로 비교하는 값). 인원은 옆의 '명'과 같은 톤으로 낮춘다.
   부모가 baseline 정렬이라 크기가 달라도 글줄은 맞는다. */
#nt_body .sbe-dist__stat .sbe-num{ color:var(--sub); margin-right:1px; }
#nt_body .sbe-dist__stat .sbe-dist__pct{ font-size:1.05rem; color:var(--ink); }
/* 정답 행에서 브랜드색을 입는 건 % 하나뿐 — 인원 수(N명)는 다른 행과 같은 톤을 유지한다
   (정답 여부와 무관한 값이라 색으로 강조하면 뜻이 겹친다) */
#nt_body .sbe-dist__row.is-answer .sbe-dist__stat .sbe-dist__pct{ color:var(--brand); }
/* 행 뱃지 2종 — 생김새 한 벌을 공유하고, 정답은 브랜드 채움 / 내 선택은 같은 브랜드의 아웃라인.
   둘 다 브랜드 계열이라 같은 화면 언어를 쓰되, 채움 여부로 '강조(정답) vs 정보(내 선택)'가 갈린다.
   align-self:center 필수 — 부모(.sbe-dist__fg)가 baseline 정렬이라 그대로 두면
   뱃지의 '글자 baseline'이 라벨에 맞춰지고 아래쪽 패딩만큼 상자가 내려앉아 보인다. */
#nt_body .sbe-tag-answer,
#nt_body .sbe-tag-mine{
  display:inline-block; flex:0 0 auto; align-self:center; line-height:1.4;
  padding:2px 8px; border-radius:var(--r-6);
  font-size:.72rem; font-weight:700; font-style:normal; color:#fff;
}
#nt_body .sbe-tag-answer{ background:var(--brand); }
/* 내 선택 — 무채색 채움(--ink). 색으로 뜻을 갖는 건 정답(브랜드) 하나뿐이고,
   '내 선택'은 사실 표시라 새 의미색을 만들지 않는다. 채도 대비로 정답과 확실히 갈린다. */
#nt_body .sbe-tag-mine{ background:var(--ink); }
/* 정답 표기는 분포 박스의 마지막 행 — 간격은 .sbe-dist 의 gap 이 담당하므로 margin 없음 */
#nt_body .sbe-answer-line{ font-size:.86rem; color:var(--body); }

/* ── 보기 칸 배치 (.sbe-opts--plain) — 보기가 있는 유형 전부(객관식·복수선택) ──
   2026-08-18 이전에는 결과 예측(single|correct)에만 쓰던 배치였다. 퀴즈도 같은 화면 언어를
   쓰도록 통일하면서 구 --row/--col 배치를 제거했다(사용자 확정). ──
   분포 막대·2단 배치는 폐기했다(구식 정의 삭제 — 레이어를 남기지 않는다).
   통계는 보기 칸 안으로 들어갔다: 한 칸이 '고르는 버튼'이자 '결과 행'이라 같은 보기 이름을
   두 번 읽을 일이 없고, 게이지가 차지하던 세로 길이도 사라진다. */
/* 배치 — 보기 개수로 가로/세로를 가르지 않는다. 칸 하나의 최소 폭만 정해 두고 몇 개가 한 줄에
   들어갈지는 폭이 정한다(auto-fit): 폭이 남으면 한 줄, 모자라면 다음 줄로 접히고, 남는 트랙은
   collapse 돼 보기 3개면 3칸이 폭을 나눠 갖는다.
   ▶ 구 방식(개수 ≤4 는 flex 가로 / 5개부터 세로)은 5개짜리 이벤트에서 칸이 화면 폭만큼 긴
     띠가 됐다. 개수는 이벤트마다 다른데 배치가 개수에 묶여 있으면 같은 화면이 아니게 된다. */
/* 열 수는 서버가 개수를 보고 정해 CSS 변수로 넘긴다(sbc_event.lib.php $cols / $cols_m).
   auto-fit 은 '들어가는 만큼' 채우고 나머지를 흘려 6개가 5+1 로 떨어졌다 — 개수를 아는 쪽이
   정하는 게 맞다. 좁은 화면 2칸 / 768px 부터 균형 열 수(6개면 3+3, 7개면 4+3).
   minmax(0,1fr) 인 이유: 1fr 은 최소값이 min-content 라 긴 라벨 하나가 제 칸을 밀어 넓힌다. */
#nt_body .sbe-opts--plain{
  display:grid;
  grid-template-columns:repeat(var(--sbe-cols-m, 2), minmax(0, 1fr));
  gap:10px;
}
/* 홀수 개일 때 마지막 한 칸(짝이 없어 우측이 비는 칸)이 한 줄을 다 쓴다 */
#nt_body .sbe-opts--plain.is-m-orphan > .sbe-opt:last-child{ grid-column:1 / -1; }
@media (min-width: 768px){
  #nt_body .sbe-opts--plain{ grid-template-columns:repeat(var(--sbe-cols, 4), minmax(0, 1fr)); }
  /* 균형 열 수라 마지막 줄에 혼자 남는 칸이 없다 — 위 한 줄 차지 규칙을 되돌린다 */
  #nt_body .sbe-opts--plain.is-m-orphan > .sbe-opt:last-child{ grid-column:auto; }
}
/* 칸 안은 2줄 — 라벨 / 통계. 기본 .sbe-opt 는 가로 1줄(아이콘+글자)이라 방향만 바꾼다.
   text-align 은 라벨이 두 줄로 꺾일 때 둘째 줄까지 가운데로 세운다(align-items 는 상자만 옮긴다). */
/* 미선택 칸도 면을 채운다(회색) — 흰 칸 위의 옅은 브랜드 톤은 차이가 약했다.
   회색 바탕에서는 선택 칸의 파란 면이 채도만으로 떠올라, 원색까지 쓰지 않아도 구분된다.
   테두리는 투명으로 두되 1px 폭은 남긴다: 선택 시 테두리가 생기면서 상자 크기가 흔들리면 안 된다. */
/* gap 10px — 라벨과 통계는 다른 층의 정보(무엇 / 얼마나)라 붙여 두면 한 덩어리로 뭉쳐 읽힌다 */
#nt_body .sbe-opts--plain .sbe-opt{
  position:relative; gap:10px; text-align:center;
  flex-direction:column; justify-content:center; padding:14px;
  background:var(--field-bg); border-color:transparent;
}
/* 칸 안 여백은 사방이 같다 — 뱃지 자리를 위쪽에 만들지 않는다.
   자리를 만들면(위 padding 키우기) 그만큼 글자가 아래로 내려앉아, 뱃지 없는 칸과
   글자 높이가 어긋나거나 모든 칸이 아래로 눌린다. 뱃지는 칸 밖(아래 .sbe-tag-answer)으로 뺀다. */
#nt_body .sbe-opts--plain .sbe-opt input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
/* px 단위 — 요청 값(17px)을 그대로 고정한다. rem 은 루트 글자 크기에 따라 달라진다.
   굵기 700 은 선택 여부와 무관하게 같다 — 고른 칸은 면(브랜드 블루)이 알리므로 굵기까지
   바꾸면 글자가 미세하게 벌어져 칸마다 이름 길이가 달라 보인다. */
#nt_body .sbe-opts--plain .sbe-opt__lb{ font-size:17px; font-weight:700; line-height:1.35; }
/* 통계 줄 — % 가 값, 인원은 근거. 크기·톤을 갈라 % 만 먼저 읽히게 한다. */
#nt_body .sbe-opts--plain .sbe-opt__stat{
  display:flex; align-items:baseline; justify-content:center; gap:6px; line-height:1.2;
}
/* 굵기 700 고정 — 라벨과 같은 이유로 선택 여부에 따라 바꾸지 않는다(칸마다 수치 폭이 달라 보인다) */
#nt_body .sbe-opts--plain .sbe-opt__pct{ font-size:1.25rem; font-weight:700; color:var(--sub); }
#nt_body .sbe-opts--plain .sbe-opt__cnt .sbe-num{ margin-right:1px; }
#nt_body .sbe-opts--plain .sbe-opt__cnt{ font-size:14px; color:var(--muted-2); }
/* 구 .is-strong(최다 선택 % 를 브랜드색으로) 규칙 제거 — 파란 숫자는 '정답' 하나만 쓴다.
   1위는 % 값 자체가 가장 크다는 사실로 이미 드러나고, 색까지 주면 정답 공개 전후로
   같은 파란 숫자가 다른 뜻(1위 → 정답)을 갖게 된다. 마크업의 클래스도 함께 제거했다. */
/* 읽기 전용(참여 후·마감 후) — 누를 수 없다는 걸 커서와 hover 없음으로 알린다 */
#nt_body .sbe-opts--plain .sbe-opt.is-static{ cursor:default; }
/* :not(.is-mine) — 고른 칸은 hover 로도 채움이 풀리면 안 된다(아래 채움 규칙보다 이쪽이 더 구체적) */
#nt_body .sbe-opts--plain .sbe-opt.is-static:not(.is-mine):hover{ border-color:transparent; background:var(--field-bg); color:var(--body); }

/* ── 칸 상태별 위계 ──
   고르는 중(:has(input:checked))  : 브랜드 블루 꽉 채움 — 누른 즉시 확실한 피드백이 필요하다.
   참여 후 내 선택(.is-mine, 정적) : 회색 면 + 무채색 테두리 — 사실 표시라 색을 쓰지 않는다.
   정답(.is-answer)                : 회색 면 + 브랜드 테두리 + 브랜드 % — 결과 화면의 결론.
   ▶ 네 상태가 '면은 같고 선으로 갈린다'는 한 문법을 쓴다. 예전엔 고르는 중·내 선택이
     브랜드 원색으로 꽉 차 있어 정답보다 튀었다(위계 역전). 색은 뱃지 규약과 같다:
     브랜드=정답 / 무채색=내 선택. */
/* 고르는 중 = 참여 후 '내 선택'과 완전히 같은 모양(흰 면 + 무채색 2px 선 + 검정 글자).
   '내가 고른 칸'은 제출 전후로 같은 사실이라 표시도 한 벌이어야 하고, 파란색은
   정답 전용으로 남긴다. box-shadow 는 두께용 안쪽 링(기본 규칙의 링을 이 값으로 덮는다). */
#nt_body .sbe-opts--plain .sbe-opt:has(input:checked){
  border-color:var(--sub); background:var(--card); box-shadow:inset 0 0 0 1px var(--sub);
}
/* 면은 미선택 칸과 같은 회색을 그대로 쓰고 테두리만 두른다 — 흰 면으로 뒤집으면 회색 칸들
   사이에서 이 칸만 도려낸 것처럼 보인다(면이 다른 층으로 읽힘). 표시는 선과 뱃지가 맡는다. */
#nt_body .sbe-opts--plain .sbe-opt.is-mine{
  border-color:var(--sub); background:var(--card);
  /* 두께는 안쪽 링으로 더한다(총 2px) — border-width 를 올리면 그만큼 안쪽 폭이 줄어
     같은 줄의 다른 칸과 글자 상자 크기가 어긋난다. 링은 레이아웃을 건드리지 않는다. */
  box-shadow:inset 0 0 0 1px var(--sub);
}
/* hover 는 색을 쓰지 않는다 — 면만 한 단 진한 회색으로. 파란 기미가 조금이라도 있으면
   마우스만 올려도 '고른 칸'으로 읽힌다(선택은 파란 선이 담당).
   기본 .sbe-opt:hover 가 긋는 브랜드 테두리도 여기서 지운다.
   ▶ :not(:has(input:checked)) 필수 — 이 hover 규칙은 선택 규칙보다 특이도가 높아서(:not 이
     클래스 하나씩 더한다) 방금 클릭한 칸 위에 마우스가 그대로 있는 동안 선택 색을 덮었다.
     "클릭했는데 hover 색만 보이고, 딴 데를 눌러야 선택 색이 나타나는" 증상이 이것이다.
     특이도로 싸우지 않고 '선택된 칸에는 아예 매칭되지 않게' 조건으로 잘라 낸다. */
#nt_body .sbe-opts--plain .sbe-opt:not(.is-static):not(.is-mine):not(:has(input:checked)):hover{
  border-color:transparent; background:var(--line-2); color:var(--body);
}
/* 이 스킨의 유일한 포커스 링 — 키보드 이동 표시는 반드시 남아야 한다.
   :focus-visible 이라 마우스 클릭에는 뜨지 않는다(구 :focus-within 잔흔 문제, 위 주석 참조). */
#nt_body .sbe-opts--plain .sbe-opt:has(input:focus-visible){ box-shadow:0 0 0 3px var(--field-focus-ring); }
/* 정답 칸 — 면은 미선택과 같은 회색 그대로, 파란 테두리만 두른다.
   내 선택(무채색 선)과 같은 문법(선)을 쓰되 색으로 갈린다: 브랜드=정답 / 무채색=내 선택. */
#nt_body .sbe-opts--plain .sbe-opt.is-answer{
  border-color:var(--sbe-pick); background:var(--card);
  box-shadow:inset 0 0 0 1px var(--sbe-pick);   /* 내 선택과 같은 방식으로 총 2px */
}
/* 고르는 중 글자 — 참여 후 '내 선택'과 같은 잉크색. 굵기는 위에서 700 으로 고정돼
   선택 여부와 무관하다(칸마다 글자 폭이 달라 보이지 않게). 인원 수는 기본 톤 그대로. */
#nt_body .sbe-opts--plain .sbe-opt:has(input:checked) .sbe-opt__lb,
#nt_body .sbe-opts--plain .sbe-opt:has(input:checked) .sbe-opt__pct{ color:var(--ink); }
/* ⚠ 규칙 순서 고정 — 내 선택 → 정답 순서로 적는다.
   한 칸이 둘 다인 경우(내가 고른 게 정답)가 있고 두 선택자는 특이도가 같다. 뒤에 온 쪽이
   이기므로 정답이 뒤여야 한다. 순서를 바꾸면 그 칸이 무채색으로 떨어져 정답 표시를 잃는다.
   두 표시는 섞지 않는다: 색은 정답 한 벌로 통일하고, '내 선택'은 좌상단 뱃지가 알린다. */
/* 내 선택 — 이름·% 를 잉크색(--ink)으로 한 단 올린다. 색이 아니라 농도로 서는 칸이라
   브랜드색을 쓰지 않는다(그 색은 정답 전용). 나머지 칸은 --body/--sub 그대로. */
#nt_body .sbe-opts--plain .sbe-opt.is-mine .sbe-opt__lb,
#nt_body .sbe-opts--plain .sbe-opt.is-mine .sbe-opt__pct{ color:var(--ink); }
/* 정답 — 선·이름·% 세 신호가 모두 브랜드색이라 한 덩어리로 읽힌다.
   .is-answer.is-mine 을 함께 적는 이유는 테두리다: 앞 .is-mine 규칙이 무채색 선을 주므로
   같은 특이도로는 뒤집히지 않는다(클래스 하나 더 붙여 확실히 이기게 한다). */
/* 정답 칸은 선·이름·% 를 모두 브랜드색으로 — 한 칸의 신호를 한 색으로 묶는다.
   (내 선택은 검정 유지 — 색이 아니라 농도로 서는 칸) */
#nt_body .sbe-opts--plain .sbe-opt.is-answer .sbe-opt__lb,
#nt_body .sbe-opts--plain .sbe-opt.is-answer .sbe-opt__pct{ color:var(--sbe-pick); }
#nt_body .sbe-opts--plain .sbe-opt.is-answer.is-mine{ border-color:var(--sbe-pick); box-shadow:inset 0 0 0 1px var(--sbe-pick); }
#nt_body .sbe-opts--plain .sbe-opt.is-answer.is-mine .sbe-opt__lb,
#nt_body .sbe-opts--plain .sbe-opt.is-answer.is-mine .sbe-opt__pct{ color:var(--sbe-pick); }
/* 정답 뱃지 — 칸의 우상단 모서리에 걸쳐 앉는다(칸 밖으로 절반 나감).
   ▶ 흐름에 두면(구 order:-1) 뱃지가 한 줄을 차지해 그 칸만 글자가 내려앉고,
     칸 안에 자리를 만들면(구 padding-top) 모든 칸의 글자가 아래로 눌렸다.
     밖으로 빼면 칸 안 여백이 사방 같은 채로 남아 정렬이 전혀 흔들리지 않는다.
   위로 나가는 9px 은 칸 사이 간격(row-gap 10px)과 질문 아래 여백(16px) 안에 들어간다.
   구 흰 링(box-shadow) 제거 — 칸이 브랜드 원색으로 채워지던 시절엔 뱃지 아래 절반이 그 면에
   묻혀 링이 필요했다. 지금은 칸이 회색 면이라 뱃지(브랜드·무채색)가 그대로 떠오른다. */
/* 뱃지 줄 전체를 우상단에 얹는다 — 개별 절대배치가 아니라 묶음 하나를 옮긴다.
   둘이 같이 붙는 칸(내가 고른 게 정답)에서 각각 배치하면 서로 겹치거나, 겹침을 피하려고
   좌표를 글자폭에 맞춰 손으로 계산해야 한다. flex 묶음은 개수가 늘어도 알아서 나란히 선다. */
#nt_body .sbe-opts--plain .sbe-opt__tags{
  position:absolute; top:-9px; right:10px; z-index:1;
  display:flex; align-items:center; gap:5px;
}
/* 크기·라운드는 기본 정의(.sbe-tag-answer/.sbe-tag-mine)가 이미 이 값이다 — 여기서는
   절대배치 묶음(.sbe-opt__tags) 안에 들어가면서 필요한 배치 리셋만 한다.
   ⚠ 크기를 여기서 다시 선언하지 말 것: 두 화면의 뱃지가 갈리는 원인이었다(2026-08-18 통일). */
#nt_body .sbe-opts--plain .sbe-tag-answer,
#nt_body .sbe-opts--plain .sbe-tag-mine{
  position:static; align-self:auto;
}
/* 좁은 화면 — 최소폭을 낮춰 한 줄 2칸을 지킨다(360px 에서 160px 는 2칸이 안 들어간다) */
@media (max-width: 575px){
  /* 열 수는 위 --sbe-cols-m 이 이미 정한다 — 여기서는 좁은 폭에 맞춘 여백만 조인다 */
  #nt_body .sbe-opts--plain{ gap:8px; }
  #nt_body .sbe-opts--plain .sbe-opt{ padding:12px 10px; }
}

/* .sbe-form__cap(보기 위 머리글) 규칙 제거 — 참여 버튼이 고르기 전에 '선택하세요'를 이미
   말하므로 같은 지시를 두 번 하지 않는다(마크업도 함께 삭제). */

/* 당첨자 */

/* 내 참여 — 참여를 마친 사람에게는 이 블록이 화면의 결론이라, 회색 필드가 아니라
   브랜드 톤 판으로 세운다(--brand-soft 8% + --brand 실선). 분포 박스(흰 판)와도 구분된다. */
/* 테두리 없음(사용자 확정) — 브랜드 틴트 배경만으로 판을 세운다. 선까지 두르면 강조가 이중이다. */
/* 판은 네 상태(참여 완료·당첨·미당첨·회수) 모두 중립 회색 하나다 — 구 브랜드 틴트 제거.
   상태 구분은 판이 아니라 머리줄 문구와 색이 한다(당첨=브랜드 / 나머지=무채색).
   .is-lost·.is-reverted 전용 배경 규칙도 이 값과 같아져 함께 삭제했다(같은 선언 두 벌 금지). */
/* 높이는 참여 버튼(.sbe-btn--join 50px)과 같다 — 이 판과 그 버튼은 참여 전/후로 같은 자리에
   번갈아 놓이므로, 높이가 다르면 참여 직후 아래 내용이 위아래로 밀린다.
   min-height 로 잡는 이유: 문구가 길어 두 줄이 되는 상태('당첨! (지급 대기)' 등 좁은 화면)에서는
   자라야 한다. 고정 height 면 그때 글자가 판 밖으로 넘친다.
   상하 padding 은 한 줄 문구(20px, line-height 1.4 ≈ 28px)가 50px 안에 들어가는 값이다. */
#nt_body .sbe-mine{
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  min-height:50px; padding:10px 20px;
  border:none; border-radius:var(--r-12); background:var(--field-bg);
}
#nt_body .sbe-mine__head{ flex:0 0 auto; min-width:0; }
/* 당첨만 브랜드 톤 판 — 축하 상태라 유일하게 색을 갖는다.
   원색이 아니라 틴트인 이유: 머리줄 글자·액수가 브랜드색이라 원색 판 위에서는 사라진다.
   나머지 세 상태(참여 완료·미당첨·회수)는 기본 회색 판 그대로. */
#nt_body .sbe-mine.is-won{ background:var(--brand-soft); }
/* 간격은 아래 형제들이 margin-top 으로 갖는다 — '내 선택' 줄은 분포가 대신 보여줄 때
   통째로 빠지므로(sbc_event.lib.php), 머리글에 margin-bottom 을 주면 그때만 여백이 겹쳐 벌어진다. */
/* justify-content:center — 우측에 붙는 칸은 이제 지급 포인트(당첨 상태) 하나뿐이고,
   그건 margin-left:auto 로 남는 공간을 먹으므로 그 상태에서만 좌/우 양끝이 된다.
   나머지 상태(응모 완료·미당첨·회수)는 문구 한 줄이라 판 가운데에 선다. */
/* 20px — 참여 버튼(.sbe-btn--join)·결과 줄(당첨·미당첨·회수)과 같은 값.
   셋은 같은 자리에 상태에 따라 번갈아 놓이므로 크기가 다르면 그 자리 글자가 들썩인다. */
#nt_body .sbe-mine__head{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:20px; font-weight:700; color:var(--ink); margin:0;
}
/* 체크 아이콘도 문구와 같은 무채색 — 이 카드에는 색이 없다.
   (아이콘이 붙는 상태는 '참여 완료' 뿐 — 당첨·미당첨·회수는 문구만 놓인다)
   규칙을 남겨 두는 이유: 지우면 아이콘이 부트스트랩/테마 기본색으로 떨어질 수 있다. */
#nt_body .sbe-mine__head i{ color:inherit; }
/* ⚠ 구 '변경 불가' 칩(.sbe-mine__lock) 규칙 제거(2026-08-18) — 되살리지 말 것.
   이 보드는 1인 1회라 못 바꾸는 게 당연해 알릴 필요가 없고, 칩이 margin-left:auto 로 우측을
   먹는 바람에 결과 전 머리줄이 판 가운데로 서지 못했다. 마크업도 함께 삭제했다. */
/* 내 선택 — 한 줄 안에서 라벨과 값의 크기를 가른다.
   '내 선택:' 은 무엇을 말하는지 알려주는 안내라 작게, 값(고른 보기 이름)이 이 줄의 내용이라 크게.
   같은 크기로 두면 안내 문구가 값만큼 자리를 차지한다. 인라인이라 밑선은 저절로 맞는다. */
#nt_body .sbe-mine__answer{ font-size:.9rem; color:var(--sub); margin:8px 0 0; text-align:center; }
#nt_body .sbe-mine__answer strong{ font-size:1.25rem; color:var(--ink); font-weight:700; }
/* 결과가 나오면 머리줄 라벨 자체가 결과 문구로 바뀐다 — 결과 전용 요소를 따로 두지 않는다.
   그때만 한 단 키우고 색으로 결과를 말한다(결과 전 '참여 완료'는 기본 브랜드 톤 1.05rem 유지). */
/* 결과 줄 3종은 같은 크기 — 액수(.sbe-mine__point .sbe-num 1.5rem)와 맞춰 이 줄과 우측 숫자가
   한 문장('당첨!  +5,000 P')처럼 읽힌다. 상태별로 크기가 갈리면 같은 자리의 같은 정보가
   글마다 다른 무게로 보인다. 색은 당첨(브랜드)만 갈리고, 못 받은 두 상태(미당첨·회수)는
   같은 회색을 쓴다 — 구 경고색(--sbe-warn)은 제거(사용자 확정). */
#nt_body .sbe-mine__head.is-won,
#nt_body .sbe-mine__head.is-lost,
#nt_body .sbe-mine__head.is-reverted{ font-size:20px; }
#nt_body .sbe-mine__head.is-won{ color:var(--brand); }
#nt_body .sbe-mine__head.is-lost,
#nt_body .sbe-mine__head.is-reverted{ color:var(--muted); }
/* 지급 포인트 — 머리줄 우측 끝('변경 불가' 칩과 같은 자리). 숫자는 .sbe-num(Oxanium),
   'P'는 본문 글꼴이라 둘을 flex 로 묶지 않는다(묶으면 히어로 정보표에서 겪은 단위 어긋남 재발). */
/* 크기가 갈린다 — 수령 액수(+5,000 / 0)는 1.15rem 그대로, 단위 'P' 만 작게.
   'P' 는 숫자가 무엇인지 알려주는 꼬리표라 숫자와 같은 크기를 쓸 이유가 없다.
   상자(=단위) 쪽을 낮추고 숫자(.sbe-num)에서 원래 크기를 되돌리는 구조라, 둘 사이
   밑선은 flex(align-items:center)가 아니라 인라인 baseline 이 잡는다. */
#nt_body .sbe-mine__point{
  margin-left:auto; flex:0 0 auto; font-size:.9rem; font-weight:700; color:var(--brand);
}
/* 20px — 결과 문구(당첨!·미당첨·회수)와 같은 값. 한 줄에 나란히 서는 두 조각이라
   크기를 맞춰야 '당첨!  +5,000 P' 가 한 문장으로 읽힌다. 단위 'P'만 작게 남긴다. */
#nt_body .sbe-mine__point .sbe-num{ font-size:20px; }
/* .is-zero(미당첨 0 P) 규칙 제거 — 미당첨에 액수를 찍지 않기로 해 참조 마크업이 사라졌다. */
/* .sbe-mine__ic(축포 이모지) 규칙 제거 — 당첨 줄에서 이모지를 걷어내 참조 마크업이 사라졌다.
   응모/참여 완료의 체크는 폰트어썸 <i class="fa fa-check"> 라 이 클래스를 쓰지 않는다
   (원형 면이 있는 fa-check-circle 은 회색 판 위에서 또 하나의 판처럼 읽혀 2026-08-18 교체). */

/* 힌트/푸터 */
#nt_body .sbe-hint{ font-size:.84rem; color:var(--muted); }
/* 푸터 = 결과 공개 안내 한 줄 (참여자 수는 히어로 정보표가 담당하므로 여기엔 강조 수치가 없다) */
#nt_body .sbe-foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:.8rem; color:var(--muted); }

/* =====================================================================
 * 6. 글쓰기 — 폼 골격 + 이벤트 설정 블록
 *
 *  골격은 업체이벤트(skin/board/bizevent/style.css 「작성폼」 .be-w-*)의 미러다.
 *  상단바 → 2단 카드 → 패널 → 패널 → 액션. #bo_w 는 면 없는 레이아웃 셸이고
 *  카드 면(배경·경계선·라운드)은 각 블록이 직접 갖는다 (카드 안 카드 방지).
 *  ⚠ 이 스킨은 여태 입력 컨트롤 CSS가 0줄이라 생짜 부트스트랩이었다 —
 *    컨트롤 정의처는 아래 「폼 컨트롤」 블록 한 곳뿐이다. 다른 곳에 덧대지 말 것.
 * ===================================================================== */

/* ── 레이아웃 셸 ──
   ⚠ 세로 간격은 #bo_w 가 아니라 폼(.sbe-w-form)이 잡는다 — 상단바·카드·패널 5덩이는
     #bo_w 의 자식이 아니라 <form> 의 자식이라, #bo_w 에 flex/gap 을 걸면 아이템이 <form>
     하나뿐이라 블록 사이 간격이 0 이 된다(전부 붙어 보이는 증상).
   블록 간격 18px — bizevent(.be-w-* 16px)보다 한 단 넓다. 그쪽은 카드마다 --sh-card 그림자가
   있어 16px 로도 면이 떨어져 보이지만, 이 스킨은 상세(#bo_v)와 같은 「그림자 없음」 규약이라
   1px 경계선만으로 끊어야 해서 같은 값이면 붙어 보인다. 그림자를 더하는 대신 여백으로 푼다.
   hidden input·script 는 UA 기본 display:none 이라 플렉스 아이템이 되지 않는다(빈 간격 없음). */
#nt_body .sbe-w-form{ display:flex; flex-direction:column; gap:18px; }

/* ── 공통 조각 ── */
/* ⚠ 필수 표시(빨간 *) 는 2026-08-22 사용자 지정으로 **작성폼 전체에서 제거**했다 — .sbe-req 규칙도 함께 삭제(고아 금지).
   되살릴 땐 마크업(write.skin.php)과 이 규칙을 같이 되살린다. 필수 여부는 input[required] 가 계속 갖고 있다. */
#nt_body .sbe-help{ margin:6px 0 0; font-size:.78rem; color:var(--muted-2); line-height:1.5; }
#nt_body .sbe-help b{ color:var(--sub); }
/* 글자수 카운터 — 업체이벤트(bizevent/style.css .be-counter)와 같은 표기 [2026-08-23 사용자 지정].
   '55' 같은 한도 텍스트는 --muted-2, 현재 글자수(b)만 브랜드 블루로 띄운다.
   ⚠ 구 .sbe-counter.is-full{ color:var(--sbe-warn) } — 한도에 닿으면 카운터가 통째로 빨개졌다 — 는 제거.
     경고색은 정원 마감·예산 초과처럼 「되돌려야 할 상태」에 쓰는 색이고, 55자를 채운 건 정상 입력이다.
     업체이벤트도 is-full 스타일이 없다(양쪽 JS 는 클래스를 계속 토글하지만 붙는 규칙이 없어 무해).
     되살릴 일이 생기면 업체이벤트와 함께 되살릴 것 — 한쪽만 두면 두 폼의 표기가 갈린다. */
#nt_body .sbe-counter{ font-size:.78rem; color:var(--muted-2); font-family:var(--font-num); }
#nt_body .sbe-counter b{ color:var(--brand); font-weight:800; }

/* ── A. 상단바 (제목 + 진행률) ── */
#nt_body .sbe-w-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  /* 높이·타이포는 업체이벤트(bizevent .be-w-topbar)와 동일 규격으로 통일.
     ⚠ 제목·부제의 line-height 는 **모든 작성폼 상단바가 1.5 로 공통**이다 [2026-08-22 · 9화면 동시].
     명시하지 않으면 스킨마다 다른 기준선을 상속한다 — 이 스킨·재능마켓·예측마켓·업체 3보드·구인구직은
     폰트테마 body{1.8}, bizevent 는 .be-write{1.6}. 그래서 상단바 높이가 화면마다 갈렸다. */
  /* 14px 20px = 작성폼 상단바 공통값 [2026-08-22 통일] — 업체 3보드(.tw-topbar)·구인구직(.jr-w-topbar)·
     커뮤니티(.fb-w-topbar)와 같은 벌. 구 13px 18px 은 이 4스킨(be·tm·pm·sbe)만의 값이었다. */
  padding:14px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-10);   /* 작성폼 패널 라운드는 전부 --r-10 (업체 작성폼 정본) [2026-08-22] */
  box-shadow:0 2px 8px rgba(20,30,60,0.05);   /* 정본(_co_write_body.php .tw-card)과 같은 그림자 [2026-08-22] */
}
#nt_body .sbe-w-topbar-l{ display:flex; align-items:center; gap:12px; min-width:0; }
#nt_body .sbe-w-mark{
  flex:0 0 auto; width:36px; height:36px; border-radius:var(--r-10);
  background:var(--brand); color:#fff;   /* 업체이벤트 .be-w-mark 와 동일. 안의 SVG 가 stroke:currentColor 로 이 색을 받는다 */
  display:inline-flex; align-items:center; justify-content:center;
}
/* ⚠ 여기만 rem 이 아니라 px — 폰트테마가 html{font-size:14px}(pc-Paperozi.css:11) 라
   1rem=14px 이다. bizevent 는 이 값들을 절대 px 로 쓰므로 rem 으로 옮기면 2px 작아지고
   박스 높이도 5.6px 낮아진다. '업체이벤트와 동일 규격'이 목적이므로 같은 단위를 쓴다. */
#nt_body .sbe-w-title{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.5; }   /* 구 1.6 은 16×1.6=25.6 으로 소수였다(§2 「곱이 정수」 위반) */
#nt_body .sbe-w-sub{ font-size:12px; line-height:1.5; color:var(--muted); margin-top:2px; }   /* 24+18+2 = 44px(짝수) → 36px 마크 중앙정렬이 정수로 떨어진다 */

/* ── B. 기본 정보 카드 (좌 썸네일 / 우 제목+정보표) ── */
#nt_body .sbe-w-card{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-10);   /* 좌우 20px = 작성폼 공통 인셋 (정본 _co_write_body.php: .tw-card 20 · .tw-panel-h/b 14px 20px · #twActions 14px 20px) [2026-08-22] */
  box-shadow:0 2px 8px rgba(20,30,60,0.05);   /* 정본(_co_write_body.php .tw-card)과 같은 그림자 [2026-08-22] */
}
/* 썸네일 열 폭 320px = 업체 작성폼(_co_write_body.php .tw-col-l)·업체이벤트·재능마켓·예측마켓과 같은 값
   [2026-08-22 사용자 지정]. 이 열 폭이 썸네일 높이(4:3 = 240px)까지 결정한다.
   ⚠ 구 값은 264px 이었다 — 「320px 이면 좌열이 우열(제목+정보표)보다 길어져 카드 우측 하단에 빈 여백이
     남는다」는 이유였는데, 다섯 작성폼 중 이 화면만 썸네일이 눈에 띄게 좁아 보여 폭을 우선했다.
     우열이 짧아 아래가 비면 그때는 **우열 콘텐츠(모드 칩 .sbe-write__head 의 margin-top:auto)** 로
     메우거나 폭이 아니라 다른 방법을 찾는다 — 폭을 다시 줄이지 말 것. */
/* 썸네일 칸은 마크업상 정보 칸('.sbe-w-col-r') '뒤'에 온다 — 썸네일은 저장 검증이 없는 선택 항목이라,
   접히는 모바일에서 필수 항목(제목·기간)보다 위에 오면 안 된다.
   DOM 을 그 순서로 두면 탭·스크린리더 순서까지 함께 맞는다.
   두 칸이 나란히 서는 넓은 화면에서만 order 로 왼쪽에 돌려놓는다(좌우 배치는 순수 시각 규약).
   업체게시판(_co_write_body.php .tw-col-l) · 예측마켓(.pm-w-col-l)과 같은 처리다. */
#nt_body .sbe-w-col-l{ flex:0 0 320px; max-width:320px; }
@media (min-width:768px){
  #nt_body .sbe-w-col-l{ order:-1; }
}
/* 세로 flex — 모드 칩(.sbe-write__head)을 좌열 하단(썸네일 안내 박스)에 맞춰 내리기 위한 축.
   카드가 align-items:stretch 라 우열 높이는 항상 좌열과 같고, 칩의 margin-top:auto 가
   남는 공간을 전부 먹어 두 열의 아래 끝이 픽셀 계산 없이 맞는다. */
#nt_body .sbe-w-col-r{ flex:1 1 0; min-width:260px; display:flex; flex-direction:column; }

/* 썸네일 드롭존 — 목록 카드와 같은 4:3 */
/* ⚠ 이 틀에 overflow:hidden 을 주지 말 것 [2026-08-22] — 모바일에서 드롭존 하단 파선이 잘렸다.
   폭이 100% 라 aspect-ratio 가 만든 높이가 소수점이 되고, 그 안의 자식(2px 테두리·border-box)이
   1px 미만 넘치면서 부모 클립에 깎인다. 라운드는 클립 대신 이미지 레이어가 border-radius:inherit
   로 직접 갖는다. 업체 작성폼(_co_write_body.php .tw-thumb)이 정본 — 6화면 같은 처리다. */
#nt_body .sbe-w-thumb{
  position:relative; width:100%; aspect-ratio:4/3;
  border-radius:var(--r-10); background:var(--thumb-bg);
}
#nt_body .sbe-w-thumb-file{ position:absolute; width:0; height:0; opacity:0; }  /* 열기는 label[for] 담당 */
#nt_body .sbe-w-thumb-img{ position:absolute; inset:0; border-radius:inherit; background-size:cover; background-position:center; }
#nt_body .sbe-w-thumb-empty{
  position:absolute; inset:0; margin:0; cursor:pointer; gap:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* 드롭존 면색 — 구인구직(.jr-w-thumb-empty)·업체 작성폼(.tw-thumb-empty)과 같은 벌 [2026-08-22].
     토큰에 없는 값이라 리터럴이다(그 두 파일과 같은 형태). hover 는 브랜드 틴트 #F1F5FD. */
  border:2px dashed var(--line-strong); border-radius:var(--r-10); background:#F2F5F9; color:var(--muted);
  transition:border-color .15s, color .15s;
}
/* 타이포·색은 업체이벤트(bizevent .be-w-thumb-empty)와 동일 규격.
   ⚠ px 인 이유는 .sbe-w-topbar 주석과 같다 — 폰트테마 html{font-size:14px} 라 rem 을 쓰면 어긋난다. */
#nt_body .sbe-w-thumb-empty .fa{ font-size:26px; line-height:1; color:var(--muted); transition:color .15s; }
#nt_body .sbe-w-thumb-empty-t{ font-size:15px; font-weight:800; color:var(--body); transition:color .15s; }
#nt_body .sbe-w-thumb-empty-s{ font-size:12.5px; color:var(--muted-2); }
/* 자식에 색을 명시했으니 hover 는 부모 color 상속으로 못 넘긴다 — 대상별로 지정 */
#nt_body .sbe-w-thumb-empty:hover{ border-color:var(--brand); background:#F1F5FD; }
#nt_body .sbe-w-thumb-empty:hover .fa,
#nt_body .sbe-w-thumb-empty:hover .sbe-w-thumb-empty-t{ color:var(--brand); }
#nt_body .sbe-w-thumb-actions{ position:absolute; right:8px; bottom:8px; display:flex; gap:6px; }
#nt_body .sbe-w-thumb-actions label,
#nt_body .sbe-w-thumb-actions button{
  margin:0; padding:5px 10px; border:0; border-radius:var(--r-6);
  font-size:.76rem; color:#fff; cursor:pointer;
  /* 사진 위에 얹히는 가림막 — 면색이 아니라 명암이라 토큰 대상이 아니다 (bizevent 와 같은 값) */
  background:rgba(0,0,0,.62);
}
#nt_body .sbe-w-thumb-actions label:hover,
#nt_body .sbe-w-thumb-actions button:hover{ background:rgba(0,0,0,.78); }
/* 타이포·행간은 업체게시판(_co_write_body.php .tw-thumb-hint) / 업체이벤트와 동일 규격.
   ⚠ px 인 이유는 .sbe-w-topbar 주석과 같다 — 폰트테마 html{font-size:14px} 라 rem 은 어긋난다. */
#nt_body .sbe-w-thumb-hint{
  margin-top:10px; padding:10px 12px; border-radius:var(--r-6);
  display:flex; flex-direction:column; gap:5px;
  background:var(--field-bg); font-size:12px; color:var(--sub); line-height:1.4;
}
/* 라벨 좌 / 값 우 — 업체이벤트(.be-w-thumb-hint > div)와 같은 행 배치.
   값은 span 없는 텍스트 노드지만 flex 안에서 익명 아이템이 되어 space-between 이 먹는다.
   (기존 min-width:66px 고정폭 방식은 값이 라벨 바로 뒤에 붙어 우측 정렬이 안 됐다) */
#nt_body .sbe-w-thumb-hint > div{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#nt_body .sbe-w-thumb-hint .k{ flex:none; font-weight:600; color:var(--muted-2); }
/* 수치값(600 × 450 · 4:3) — 숫자는 숫자폰트로. 라벨(.k)·파일 형식 줄은 대상 아님 */
#nt_body .sbe-w-thumb-hint .v{ font-family:var(--font-num); font-weight:600; }   /* 값 줄 전체(사이즈·비율·파일 형식) — 정본 .tw-thumb-hint .v · 구인구직 .jr-w-thumb-hint .v 와 같은 숫자폰트 + **600** [2026-08-22]. 굵기가 빠져 있어 라벨(.k 600)보다 값이 얇아 보였다. */

/* 밑줄형 제목 */
#nt_body .sbe-w-tagline{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
/* 제목 라벨 — 배지(브랜드 틴트 알약)에서 **세로 막대 + 글자**로 [2026-08-22 사용자 지정].
   정본은 업체 작성폼 `_co_write_body.php` 의 `.tw-bar + .tw-panel-t`(3×16px 막대 · 16.5px/800),
   구인구직 `.jr-w-tag` 도 같은 형태다. 패널 소제목과 같은 벌이라 화면 안에서 라벨 언어가 하나가 된다.
   ⚠ 배지(background/border-radius/padding)로 되돌리지 말 것. */
#nt_body .sbe-w-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:16.5px; font-weight:800; color:var(--ink);   /* 구 .86rem(≈12px)/700 — rem 함정도 함께 제거 */
}
#nt_body .sbe-w-tagline .sbe-counter{ margin-left:auto; }
#nt_body .sbe-w-title-input{
  display:block; width:100%; padding:6px 2px; margin-top:10px; margin-bottom:16px;
  border:0; border-bottom:1px dashed var(--line-strong); border-radius:0; background:transparent;
  font-size:19px; font-weight:800; color:var(--ink);
}
#nt_body .sbe-w-title-input:focus{ outline:0; border-bottom-style:solid; border-bottom-color:var(--brand); }
#nt_body .sbe-w-title-input::placeholder{ font-weight:500; color:var(--muted-2); }

/* 정보표 — 라벨 칼럼 92px 고정 (부트스트랩 col-md-2 퍼센트 폐기)
   ⚠ 위 구분선은 래퍼가 아니라 첫 행이 갖는다 — 행이 하나도 없을 때(분류·태그 off +
     관련링크·옵션 주석 상태) 래퍼에 border-top 을 두면 빈 잔선 1px 이 남는다. */
#nt_body .sbe-irow{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; }
#nt_body .sbe-w-infotable .sbe-irow{ padding:11px 0; border-bottom:1px solid var(--line-soft); }
#nt_body .sbe-w-infotable .sbe-irow:first-child{ border-top:1px solid var(--line-soft); }
#nt_body .sbe-w-infotable .sbe-irow:last-child{ border-bottom:0; }
#nt_body .sbe-ilabel{ flex:0 0 92px; padding-top:8px; font-size:12.5px; font-weight:700; color:var(--muted); }   /* px 고정 — 이 파일 다른 주석대로 rem 은 폰트테마 html{14px/모바일 15px} 에 묶여 뷰포트마다 어긋난다. 값은 정본 _co_write_body.php 기준 [2026-08-22] */   /* 정본 .tw-ilabel = 92px · 12.5px/700 (구 .84rem≈11.8px/600) */
#nt_body .sbe-ival{ flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#nt_body .sbe-ival--stack{ flex-direction:column; align-items:stretch; }
#nt_body .sbe-irow--admin{
  background:var(--brand-soft); border-radius:var(--r-6);
  padding-left:10px; padding-right:10px;
}
#nt_body .sbe-checks{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
#nt_body .sbe-checks .custom-control{ margin-right:0; }

/* ── 폼 컨트롤 (정의처 — 여기 한 곳) ── */
#nt_body .sbe-w-form .form-control,
#nt_body .sbe-w-form .custom-select{
  height:auto; min-height:40px; padding:8px 12px;
  border:1px solid var(--line-strong); border-radius:var(--r-6);
  background-color:var(--card); color:var(--ink); font-size:.9rem;
  box-shadow:none; transition:border-color .15s, box-shadow .15s;
}
#nt_body .sbe-w-form .form-control:focus,
#nt_body .sbe-w-form .custom-select:focus{
  outline:0; border-color:var(--brand);
  /* ⚠ background 단축 속성 금지 — custom-select 화살표·datetime-local 위젯 아이콘이 지워진다 */
  box-shadow:inset 0 0 0 2px var(--brand);
}
#nt_body .sbe-w-form .form-control::placeholder{ color:var(--muted-2); }
#nt_body .sbe-w-form .form-control:disabled,
#nt_body .sbe-w-form .custom-select:disabled{
  background-color:var(--field-bg); color:var(--muted); cursor:not-allowed;
}
/* ⚠ :not(--stack) 필수 — 세로 스택 행은 flex-direction:column 이라 flex-basis 가 '높이'로 읽힌다.
   빼면 관련 링크·보기 입력이 220px 높이로 부풀어 오른다. */
#nt_body .sbe-ival:not(.sbe-ival--stack) > .form-control,
#nt_body .sbe-ival:not(.sbe-ival--stack) > .custom-select{ flex:1 1 220px; }
/* 값 폭 — 숫자·날짜·선택은 텍스트만큼 넓을 필요가 없다 (위 일반 규칙 뒤에 둬 동점 특이성에서 이긴다) */
#nt_body .sbe-ival:not(.sbe-ival--stack) > .sbe-w-select{ flex:0 1 240px; }
#nt_body .sbe-ival:not(.sbe-ival--stack) > .sbe-w-num{ flex:0 1 160px; }
/* 기간 = [달력(readonly) + 시각 select] 한 줄. 네이티브 datetime-local 대체 — 팝업 달력은
   디자인시스템 공용 컴포넌트가 그린다(plugin/jquery-ui/style.css, DESIGN_SYSTEM.md §15).
   구 .sbe-w-dt 규칙을 대체한다(그 클래스는 더 이상 마크업에 없다). */
#nt_body .sbe-ival:not(.sbe-ival--stack) > .sbe-dt-row{ flex:0 1 340px; min-width:250px; }
#nt_body .sbe-dt-row{ display:flex; align-items:center; gap:6px; }
#nt_body .sbe-dt-row > .sbe-date{ flex:1 1 0; min-width:0; font-family:var(--font-num); cursor:pointer; }
#nt_body .sbe-dt-row > .sbe-time{ flex:0 0 88px; font-family:var(--font-num); cursor:pointer; }
#nt_body .sbe-date{ user-select:none; } /* readonly 텍스트 선택 하이라이트 방지 */
/* 칸 안 우측 달력 아이콘 — 업체이벤트(.be-date)·예측시장(.pm-date)과 **같은 SVG·같은 자리**다 [2026-08-22].
   readonly + datepicker 로만 입력하는 칸이라, 「눌러서 고르는 칸」이라는 신호가 필요하다.

   ⚠⚠ **!important 가 필요한 이유** — 이 칸만 `.form-control` 을 달고 있다.
   전역 정본 `.sbc-site-main .form-control`(custom-sidebar.css:3778)이
       background: var(--surface-fill) !important;
       padding: 10px 14px !important;
   을 건다. `background` 는 **축약형**이라 `background-image` 까지 `none !important` 로 리셋한다 —
   특이도를 아무리 올려도 !important 없이는 아이콘이 그려지지 않는다(그래서 첫 판에 안 보였다).
   같은 상황의 선례: 먹튀검증 피해금액 칸(`#bo_w .mk-amount-input`)도 같은 이유로 !important 를 쓴다.
   ⚠ 형제 보드(bizevent .be-date · predictlist .pm-date)는 `.form-control` 대신 스킨 자체 입력 클래스
     (.be-w-input / .pm-w-input)를 써서 이 문제를 애초에 피한다. 이 칸을 그 방식으로 바꾸려면
     패딩·높이까지 스킨이 직접 갖게 해야 한다(전역이 주던 값이 함께 사라지므로) — 지금은 범위를 넓히지 않았다.
   ⚠ 아이콘 색은 토큰화 불가(SVG data-uri 안의 stroke 값) — `--muted-2` 리터럴 #9AA0A8 이다.
     그 색을 바꾸면 여기·bizevent .be-date·predictlist .pm-date 세 곳을 손으로 함께 고친다. */
#nt_body .sbe-date{
  padding-right:30px !important;   /* 전역 padding !important 를 이겨야 글자가 아이콘 밑으로 들어가지 않는다 */
  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") !important;
  background-repeat:no-repeat !important;
  background-position:right 8px center !important;
  background-size:15px 15px !important;
}
/* 잠금(참여자 있음) 상태에서는 고를 수 없으니 아이콘도 뺀다 — .be-date:disabled 와 같은 처리 */
#nt_body .sbe-date:disabled{ color:var(--muted-2); cursor:default; background-image:none !important; }
/* 안내문(.sbe-help) 줄 오른쪽에 앉는 작은 버튼 — 구 위치는 날짜/시각 줄 안이었고 34px 높이였다.
   ⚠ 줄 밖으로 옮긴 이유는 write.skin.php 의 주석 참조(두 줄의 날짜칸 폭이 갈렸다) [2026-08-22]. */
#nt_body .sbe-dt-clear{
	flex:none; margin-left:8px; padding:1px 8px; font-size:12px; font-weight:600; line-height:1.5;
	color:var(--sub); background:var(--field-bg);
	border:1px solid var(--line-2); border-radius:var(--r-6); cursor:pointer;
	vertical-align:1px;   /* 12.5px 안내문 baseline 에 맞춘 광학 보정 */
}
#nt_body .sbe-dt-clear:hover{ color:var(--ink); border-color:var(--line-strong); }
/* 문항(질문)도 같은 취지 — 한 줄 질문이라 폼 끝까지 늘어날 이유가 없다.
   위 일반 규칙(flex:1 1 220px)보다 id 하나가 더 많아 특이성에서 이긴다. */
#nt_body #se_question{ flex:0 1 420px; }
#nt_body .sbe-ival--stack > *{ flex:0 0 auto; }
/* 직접 설정 행(문항 유형 + 보상 방식) — 라벨·값 쌍 2개가 한 줄에 서다 좁아지면 통째로 접힌다 */
#nt_body .sbe-irow--split .sbe-ival{ flex:1 1 200px; }

/* ── 칩 라디오 (이벤트 / 일반 게시글 전환) ── */
#nt_body .sbe-chips{ display:flex; flex-wrap:wrap; gap:8px; }
#nt_body .sbe-chip{ position:relative; margin:0; cursor:pointer; }
#nt_body .sbe-chip input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
#nt_body .sbe-chip > span{
  display:block; padding:14px 14px; transition:all .15s;
  border:1px solid var(--line-strong); border-radius:var(--r-10); background:var(--card);
}
/* 글자 크기는 프리셋 카드(.sbe-preset__name / __desc)와 같은 값 — 같은 화면의 '고르는 카드'라
   크기가 갈리면 위계가 있는 것처럼 읽힌다. 한쪽을 바꾸면 다른 쪽도 함께 고칠 것. */
#nt_body .sbe-chip > span b{ display:block; font-size:1.08rem; font-weight:700; color:var(--ink); }
#nt_body .sbe-chip > span em{ display:block; font-style:normal; font-size:.93rem; color:var(--muted); margin-top:2px; }
#nt_body .sbe-chip:hover > span{ border-color:var(--brand); }
/* 선택 상태는 '면'(브랜드 테두리 + 틴트 배경)으로만 표시한다 — 제목 글자색은 선택 여부와 무관하게
   var(--ink) 고정. 글자색까지 브랜드색으로 바뀌면 두 칩의 제목이 서로 다른 색으로 읽혀
   '고르는 중'이 아니라 '한쪽이 다른 종류의 항목'처럼 보인다(사용자 확정, 2026-08-18 · 2026-08-22 재확인).
   ⚠ 채움형(background:var(--brand) + 흰 글자)으로 바꿨다가 되돌린 이력이 있다 — 되살리지 말 것.
   ⚠ **인셋 링(box-shadow:0 0 0 1px inset)은 두지 않는다** [2026-08-22] — 1px 테두리와 겹쳐 파란 띠가
     2px 로 두꺼워졌다. 구인구직 작성폼(.jr-jobtype__box / .jr-w-chip)과 같은 **1px 테두리 한 겹**이 기준이다. */
#nt_body .sbe-chip input:checked + span{
  border-color:var(--brand); background:var(--brand-soft);
}
#nt_body .sbe-chip input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }
#nt_body .sbe-chip--wide{ flex:1 1 220px; }
#nt_body .sbe-chip.is-disabled{ opacity:.6; }
#nt_body .sbe-chip.is-disabled input{ cursor:not-allowed; }

/* ── C·D·E. 패널 ── */
#nt_body .sbe-w-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-10); overflow:hidden;
  box-shadow:0 2px 8px rgba(20,30,60,0.05);   /* 정본(_co_write_body.php .tw-card)과 같은 그림자 [2026-08-22] */
}
#nt_body .sbe-w-panel-h{ display:flex; align-items:center; gap:8px; padding:14px 20px 0; }
#nt_body .sbe-w-bar{ display:inline-block; width:3px; height:16px; flex:none; border-radius:2px; background:var(--brand); }   /* 3×16px · 라운드 2px — 정본 _co_write_body.php 의 .tw-bar [2026-08-22] */
/* STEP 제목(.sbe-step__title)과 같은 크기 — 같은 층위의 섹션 머리라 위계를 나누지 않는다 */
#nt_body .sbe-w-panel-t{ font-size:16.5px; font-weight:800; color:var(--ink); }   /* px 고정 — 이 파일 다른 주석대로 rem 은 폰트테마 html{14px/모바일 15px} 에 묶여 뷰포트마다 어긋난다. 값은 정본 _co_write_body.php 기준 [2026-08-22] */   /* 정본 .tw-panel-t = 16.5px/800 (구 1.12rem≈15.7px/700) */
#nt_body .sbe-w-panel-b{ padding:14px 20px; }
#nt_body .sbe-w-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px;
}
#nt_body .sbe-w-captcha{ flex:1 1 auto; min-width:0; }
#nt_body .sbe-w-btns{ display:flex; gap:16px; margin-left:auto; }   /* 16px = 두 버튼 사이 공통 간격 (정본 #twActions .tw-w-btns · 구인구직 .jr-w-actions 와 같은 값) [2026-08-22] */
/* ⚠ 작성 폼 전용 — 선택자를 .sbe-w-btns 안으로 좁힌 이유:
   예전엔 이 블록이 `#nt_body .sbe-btn` 을 통째로 다시 정의했다. 위 §참여 버튼(.sbe-btn--join)과
   특이도가 같은데 파일에서 더 뒤에 있어, 참여 버튼의 크기·높이가 여기 값(.92rem/42px)으로
   조용히 덮였다("참여하기가 20px 이 안 된다"의 원인). 같은 선택자를 두 번 쓰지 않는다. */
/* 크기는 업체 작성폼(#twActions .tw-w-btn)이 정본 [2026-08-22 통일] — 14px/700 · line-height 1.5 ·
   패딩 13/24(주 버튼 13/30). ⚠ 구 값은 `height:42px` + `font-size:.92rem` 이었다. rem 은 폰트테마
   `html{font-size:14px}`(모바일 15px)에 묶여 PC 12.9 / 모바일 13.8px 로 흔들렸다 — 이 파일 다른
   주석이 경고하는 그 함정이다. px 로 고정한다. */
#nt_body .sbe-w-btns .sbe-btn{
  height:auto; padding:13px 24px;
  /* ⚠ border 축약형 금지 — 축약형은 border-color 까지 함께 정한다. 이 규칙이 (1,2,0) 이라
     (1,1,0) 인 .sbe-btn-ghost 의 border-color 를 이겨서, **취소하기 테두리가 투명해져 안 보였다.**
     굵기·모양만 여기서 정하고 색은 각 변종이 갖는다. */
  border-width:1px; border-style:solid; border-radius:var(--r-10);
  /* <a> 로 만든 취소하기가 hover 에서 밑줄이 그어지던 것 — 형제 스킨 버튼(.be-btn·.tm-btn·.pm-btn·.jr-btn)은
     모두 갖고 있는데 이 스킨만 빠져 있었다. */
  text-decoration:none;
  font-size:14px; font-weight:700; line-height:1.5;
  letter-spacing: normal;   /* ⚠ 크롬은 <button> 의 자간만 normal 로 리셋하고 <a> 는 .sbc-site-main{-0.3px} 를 상속한다 — 같은 클래스인데 「취소하기」(a)가 「작성완료」(button)보다 1.2px 좁아진다 (DESIGN_SYSTEM §2 상속 함정) */
  transition:background-color .15s, border-color .15s, color .15s;
}
/* ⚠ 주 버튼에 별도 패딩을 주지 않는다 — 두 버튼은 색만 다르고 상자는 같아야 한다 [2026-08-22]. */
#nt_body .sbe-w-btns .sbe-btn:hover{ text-decoration:none; }
/* border-color:transparent — 위 규칙이 색을 안 정하므로 여기서 준다(안 주면 currentColor=흰색 테두리가 보인다) */
#nt_body .sbe-btn-primary{ background:var(--brand); color:#fff; border-color:transparent; }
#nt_body .sbe-btn-primary:hover{ background:var(--brand-hover); color:#fff; }
#nt_body .sbe-btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
#nt_body .sbe-btn-ghost{ background:var(--card); border-color:var(--line-2); color:var(--sub); }   /* 테두리 --line-2 · 글자 --sub — 작성폼 취소하기 한 벌 [2026-08-22] */
#nt_body .sbe-btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

/* ── 보기 입력 행 (STEP 2) ── */
/* max-width — 보기 텍스트는 짧아서 폼 전체 폭이 필요 없다. 문항(#se_question)과 같은 값이라
   두 입력의 오른쪽 끝선이 맞는다. (--stack 행이라 flex-basis 는 높이로 읽혀 못 쓴다) */
#nt_body #sbe_opts_wrap{ display:flex; flex-direction:column; gap:8px; max-width:420px; }
/* 입력칸과 삭제(×)는 겹치지 않는 별개 요소다 — 입력칸은 사방 라운드 테두리 하나로 온전하고,
   × 는 그 바깥에 면·테두리 없는 맨 아이콘으로 선다.
   ⚠ 마크업에서 input-group / btn-basic 클래스를 뺐다(write.skin.php). 부트스트랩의
     `.input-group>.form-control:not(:last-child)` 라운드 제거와 나리야의
     `.btn.btn-basic{color:#000!important; border:1px solid #ddd; background-color:#fff}` 이
     겹쳐 우측 모서리가 잘려 보였고, 코어를 못 고치니 클래스를 안 쓰는 쪽이 정답이다.
     되살릴 때는 이 주석부터 읽을 것. */
#nt_body .sbe-opt-row{ display:flex; align-items:center; gap:8px; }
#nt_body .sbe-opt-row .form-control{ flex:1 1 auto; min-width:0; }
#nt_body .sbe-opt-del{
  flex:0 0 auto; width:28px; height:28px; padding:0; border:0; background:none;
  font-size:1.15rem; font-weight:700; line-height:1; color:var(--muted-2);
  cursor:pointer; transition:color .15s;
}
#nt_body .sbe-opt-del:hover{ color:var(--sbe-warn); }
#nt_body .sbe-w-minibtn{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border:1px dashed var(--line-strong); border-radius:var(--r-6);
  background:var(--card); color:var(--sub); font-size:.82rem; cursor:pointer; transition:all .15s;
}
#nt_body .sbe-w-minibtn:hover{ border-color:var(--brand); color:var(--brand); }

/* ── 반응형 ── */
@media (max-width: 767px){
  #nt_body .sbe-w-col-l{ flex:1 1 100%; max-width:100%; }
  #nt_body .sbe-ilabel{ flex:0 0 78px; }
  #nt_body .sbe-w-actions{ flex-direction:column-reverse; align-items:stretch; }
  #nt_body .sbe-w-btns{ margin-left:0; }
  /* 작성 폼 버튼만 — 참여 버튼(.sbe-btn--block)은 이미 width:100% 라 대상이 아니다 */
  #nt_body .sbe-w-btns .sbe-btn{ flex:1 1 0; min-width:0; }
}
@media (max-width: 575px){
  /* 좌측 시작선 — 목록과 같은 12(거터) + 2 = 화면 14px (DESIGN_SYSTEM §9.2).
     #bo_w 는 좌우 패딩이 없는 셸이라 그대로 두면 카드가 12px 에서 시작해 목록보다 2px 밖에 섰다. */
  /* 모바일 full-bleed — 면은 화면 좌우 끝까지, 인셋은 안쪽이 14px [2026-08-22 사용자 지정].
     커뮤니티 작성폼(free-community #bo_w)·업체 작성폼(.tw-wrap)과 같은 구조다
     (DESIGN_SYSTEM §9.2 「모바일 목록 면은 full-bleed 다」와 같은 규약).
     ⚠ 구 규격은 「좌측 시작선 2px(거터 12 + 2 = 화면 14px) + 카드 면·라운드 유지」였다 — 되돌리지 말 것.
     ⚠ 거터 숫자를 복사하지 않는다 — 주인은 custom-sidebar.css 의 --page-gutter.
     ⚠ width 를 주지 않는다(블록이라 음수 마진만으로 그만큼 넓어진다). */
  #nt_body #bo_w {
  	margin-left: calc(-1 * var(--page-gutter, 12px));
  	margin-right: calc(-1 * var(--page-gutter, 12px));
  	padding-left: 0;
  	padding-right: 0;
  }
  #nt_body .sbe-w-topbar,
  #nt_body .sbe-w-card,
  #nt_body .sbe-w-panel {
  	border-left: 0;
  	border-right: 0;
  	border-radius: 0;
  }
  #nt_body .sbe-w-topbar{ padding:12px 14px; }
  #nt_body .sbe-w-card{ padding:14px; }
  #nt_body .sbe-w-panel-h{ padding:12px 14px 0; }
  #nt_body .sbe-w-panel-b{ padding:12px 14px 14px; }
  #nt_body .sbe-w-actions{ padding:14px; }
  /* 라벨을 위로 올려 값 입력폭을 확보 (78px 라벨 + 좁은 화면 = 값이 두 줄로 접힌다) */
  #nt_body .sbe-ilabel{ flex:1 1 100%; padding-top:0; }
}

/* ── 이벤트 설정 블록 ── */
#nt_body .sbe-write__head{ margin-bottom:14px; }
/* 우열의 마지막 블록일 때(=현재처럼 정보표가 비어 있을 때)만 바닥으로 붙인다.
   정보표가 되살아나면 :last-child 가 풀려 원래 흐름(칩 → 정보표)으로 되돌아간다. */
#nt_body .sbe-w-col-r > .sbe-write__head:last-child{ margin-top:auto; margin-bottom:0; }
#nt_body .sbe-write__lockmsg{
  margin:8px 0 0; padding:8px 12px; border-radius:var(--r-6);
  background:var(--sbe-warn-soft); color:var(--sbe-warn); font-size:.8rem;
}

/* ── 단계형 폼 (STEP 섹션) ──
   패널(.sbe-w-panel)이 이미 카드 면(면색+테두리+라운드)이라 STEP 을 또 카드로 감싸면
   같은 배경의 카드-in-카드가 되어 위계가 깨진다. 면 없이 잔선+여백으로만 단계를 끊고,
   카드 레이어는 실제로 고르는 대상인 프리셋(.sbe-preset)만 갖는다. */
#nt_body .sbe-step{ padding:18px 0; border-top:1px solid var(--line-soft); }
#nt_body .sbe-step:first-child{ padding-top:0; border-top:0; }
#nt_body .sbe-step:last-child{ padding-bottom:0; }	/* 패널 아래 패딩과 이중으로 겹치지 않게 */
/* baseline 정렬 — 번호는 Oxanium(--font-num), 제목은 본문 폰트라 세로 메트릭이 달라서
   flex-start(박스 위쪽 맞춤)로는 글자 높이가 어긋난다. 오른쪽 블록의 baseline 은
   첫 줄(=제목)이라 번호와 제목이 정확히 같은 선에 앉는다. */
#nt_body .sbe-step__head{ display:flex; align-items:baseline; gap:6px; margin-bottom:14px; }
/* 동그라미 배지 폐기 — '1. 어떤 이벤트인가요?' 처럼 제목과 한 줄로 읽히는 번호.
   크기·line-height 를 .sbe-step__title 과 맞춰야 첫 줄 베이스라인이 어긋나지 않는다. */
#nt_body .sbe-step__num{
  flex:0 0 auto; font-family:var(--font-num); font-weight:800;
  font-size:1.12rem; line-height:1.4; color:var(--brand);
}
#nt_body .sbe-step__num::after{ content:'.'; }
#nt_body .sbe-step__title{ display:block; font-size:1.12rem; color:var(--ink); line-height:1.4; }
/* 카드 설명(.sbe-preset__desc / .sbe-chip em)과 같은 크기 — 같은 층위의 보조 문구 */
#nt_body .sbe-step__sub{ display:block; font-size:.93rem; color:var(--muted); margin-top:2px; }
#nt_body .sbe-step__none{
  margin:0; padding:10px 14px; border-radius:var(--r-6); background:var(--field-bg);
  color:var(--muted); font-size:.84rem;
}
/* STEP 카드 안의 정보행 — 정보표(줄선)와 달리 여기선 여백으로만 끊는다 */
#nt_body .sbe-step .sbe-irow{ margin-bottom:12px; }
/* 아래 여백 제거는 STEP 의 '직속' 마지막 행에만 — 자손 전체(.sbe-step .sbe-irow:last-child)로
   두면 data-show-qtype 토글용 래퍼 div 안에 홀로 든 행(문항(질문))까지 래퍼의 last-child 라
   여백을 잃어 다음 행(보기)과 붙어버린다. */
#nt_body .sbe-step > .sbe-irow:last-child{ margin-bottom:0; }

/* ── STEP 1 프리셋 카드 그리드 ── */
#nt_body .sbe-preset-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
@media (max-width: 991px){ #nt_body .sbe-preset-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575px){ #nt_body .sbe-preset-grid{ grid-template-columns:1fr; } }
#nt_body .sbe-preset{
  position:relative; display:flex; flex-direction:column; gap:4px; margin:0;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-10);
  background:var(--card); cursor:pointer; transition:all .15s;
}
#nt_body .sbe-preset:hover{ border-color:var(--brand); }
/* ⚠ 인셋 링 없음 — 위 .sbe-chip 과 같은 이유다(1px 테두리 한 겹 = 구인구직 기준) [2026-08-22].
   같은 화면의 '고르는 카드'라 칩과 띠 두께가 갈리면 두 UI 가 다른 종류로 읽힌다. */
#nt_body .sbe-preset.is-on{
  border-color:var(--brand); background:var(--brand-soft);
}
#nt_body .sbe-preset.is-disabled{ opacity:.55; cursor:not-allowed; }
#nt_body .sbe-preset.is-disabled.is-on{ opacity:1; } /* 잠금 시 현재 조합 카드는 또렷하게 */
#nt_body .sbe-preset__radio{ position:absolute; opacity:0; pointer-events:none; }
/* 크기는 모드 칩(.sbe-chip > span b / em)과 짝 — 한쪽만 바꾸지 말 것 */
#nt_body .sbe-preset__name{ font-size:1.08rem; font-weight:700; color:var(--ink); }
#nt_body .sbe-preset__desc{ font-size:.93rem; color:var(--muted); line-height:1.5; }
#nt_body .sbe-preset-extra{ margin-top:10px; }
/* 프리셋 카드 바로 아래에 붙는 행(직접 설정의 문항 유형·보상 방식 셀렉트) — 카드 그리드와 같은 12px 로 띄운다.
   .sbe-step .sbe-irow 는 아래 여백(12px)만 주므로 카드 그리드 직후 행은 위 여백이 0 이 되어 카드에 붙어 있었다(2026-09-12). */
#nt_body .sbe-preset-sub{ margin-top:12px; }

/* ── STEP 2 정답 안내 / STEP 3 요약 문장 ── */
#nt_body .sbe-ans-note{ display:block; margin:6px 0 0; font-size:.78rem; color:var(--muted); }
#nt_body .sbe-ans-note.is-must{ color:var(--sbe-warn); font-weight:600; }
#nt_body .sbe-summary{
  margin-top:4px; padding:12px 14px; border:1px dashed var(--line-strong);
  border-radius:var(--r-10); background:var(--field-bg);
  font-size:.92rem; color:var(--body);
}
#nt_body .sbe-summary .fa{ color:var(--brand); margin-right:4px; }

/* =====================================================================
 * 7. 다크모드 (DESIGN_SYSTEM §7.4 예외 — 다크 블록은 리터럴 유지 관례)
 * ===================================================================== */
html.dark-mode #nt_body .sbe-card{ background:#1b1c20; border-color:#2c2d33; }
/* .sbe-panel 의 구분선은 다크 분기를 두지 않는다 — 바로 옆 형제인 히어로 아래선이
   분기 없이 var(--line-2) 로만 그려져, 여기만 리터럴을 박으면 선 색이 서로 어긋난다.
   제목 색은 예외 — 라이트에서 var(--ink)(#1A1D21) 로 올라가 다크 배경에서 안 보인다.
   형제인 '댓글 N'(style.css §17)도 같은 값으로 분기를 갖는다. 둘은 함께 움직인다. */
html.dark-mode #nt_body .sbe-panel__title{ color:#f3f4f6; }
html.dark-mode #nt_body .sbe-card__title{ color:#e5e7eb; }
html.dark-mode #nt_body .sbe-card__ruledesc,
html.dark-mode #nt_body .sbe-card__joins{ color:#9ca3af; }
html.dark-mode #nt_body .sbe-card__foot{ border-top-color:#26272c; }
html.dark-mode #nt_body .sbe-thumb--ph{ background:#25262b; }
html.dark-mode #nt_body .sbe-thumb__ic{ color:rgba(255,255,255,.25); }
html.dark-mode #nt_body .sbe-question{ color:#e5e7eb; }
html.dark-mode #nt_body .sbe-opt,
html.dark-mode #nt_body .sbe-input{ background:#202126; border-color:#2c2d33; color:#d1d5db; }
/* 분포 — 흰 박스는 --card(#fff) 라 다크 분기 필수(고스트 버튼 흰 판 사고 전례).
   행(트랙)은 게이지와 같은 #2c2d33, 채움은 어두운 트랙 위라 라이트보다 진하게. */
html.dark-mode #nt_body .sbe-dist{ background:#1b1c20; border-color:#2c2d33; }
html.dark-mode #nt_body .sbe-dist__row{ background:#2c2d33; }
html.dark-mode #nt_body .sbe-dist__bar{ background:rgba(255,255,255,.07); }
html.dark-mode #nt_body .sbe-dist__row.is-answer .sbe-dist__bar{ background:rgba(39,113,227,.30); }
/* 선택 상태 — --brand-soft(불투명도 8%)는 다크 배경에서 거의 안 보인다. 글쓰기 .sbe-preset.is-on 과 동일 톤 */
html.dark-mode #nt_body .sbe-opt:hover,
html.dark-mode #nt_body .sbe-opt:has(input:checked){ border-color:var(--brand); background:rgba(39,113,227,.15); color:#e5e7eb; }
/* 예측형 칸 — 통계 글자는 라이트 토큰(--sub/--muted-2)이라 어두운 판 위에서 가라앉는다 */
/* 무채색(--ink #1A1D21) 뱃지는 다크 배경에 묻힌다 — 밝은 회색으로 뒤집는다 */
html.dark-mode #nt_body .sbe-opts--plain .sbe-tag-mine{ background:#e5e7eb; color:#1b1c20; }
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt__lb{ color:#d1d5db; }
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt__pct{ color:#9ca3af; }
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt__cnt{ color:#6b7280; }
/* 다크도 라이트와 같은 위계 — 고르는 중·정답은 --sbe-pick 솔리드(흰 글자라 배경 밝기 무관),
   참여 후 내 선택은 무채색 테두리 + 카드 면(#25262b, 미선택 칸보다 한 단 밝다).
   위 .sbe-opt:hover/:has(input:checked) 다크 규칙이 브랜드 테두리를 긋기 때문에(선택자가 더
   구체적) 전부 여기서 되돌린다. .is-mine 을 따로 적는 이유: 참여 후 목록은 input 이 없는
   정적 판이라 :has 선택자에 안 걸린다. */
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt:has(input:checked){ border-color:#6b7280; background:#25262b; box-shadow:inset 0 0 0 1px #6b7280; }
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt:has(input:checked) .sbe-opt__lb,
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt:has(input:checked) .sbe-opt__pct{ color:#f3f4f6; }
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-mine{ border-color:#6b7280; background:#25262b; box-shadow:inset 0 0 0 1px #6b7280; }
/* 정답 — 면은 그대로, 선만. 다크에서 브랜드 원색 선은 어두워 밝은 단(#7ba7f0)을 쓴다. */
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-answer,
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-answer.is-mine{ border-color:#7ba7f0; background:#25262b; box-shadow:inset 0 0 0 1px #7ba7f0; }
/* 내 선택 이름 — 다크의 '검정'은 가장 밝은 글자색이다(대비 방향이 뒤집힌다).
   라이트와 같은 이유로 정답 규칙보다 앞에 둔다(둘 다인 칸에서 정답이 이겨야 한다) */
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-mine .sbe-opt__lb,
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-mine .sbe-opt__pct{ color:#f3f4f6; }
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-answer .sbe-opt__lb,
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-answer .sbe-opt__pct{ color:#7ba7f0; }
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-answer.is-mine .sbe-opt__lb,
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt.is-answer.is-mine .sbe-opt__pct{ color:#7ba7f0; }
/* hover 는 다크에서도 무채색 — 파란 기미가 있으면 '고른 칸'으로 읽힌다(라이트와 같은 이유) */
html.dark-mode #nt_body .sbe-opts--plain .sbe-opt:not(.is-static):not(.is-mine):not(:has(input:checked)):hover{ border-color:transparent; background:#2c2d33; }
/* 고른 칸의 인원 수 다크 전용 색(구 rgba(123,167,240,.72)) 제거 — 면이 옅은 틴트이던 시절 값이다.
   지금은 솔리드 브랜드 면이라 라이트와 같은 흰색 계열(위 rgba(255,255,255,.75))이 그대로 맞고,
   그 규칙이 다크 회색 규칙(.sbe-opt__cnt)보다 클래스가 하나 많아 특이도에서도 이긴다. */
html.dark-mode #nt_body .sbe-dist__label{ color:#9ca3af; }
html.dark-mode #nt_body .sbe-dist__row.is-answer .sbe-dist__label{ color:#e5e7eb; }
/* 내 선택 뱃지 — 라이트의 --ink(거의 검정)는 다크 행(#2c2d33) 위에서 묻힌다. 명암을 뒤집는다 */
html.dark-mode #nt_body .sbe-tag-mine{ background:#e5e7eb; color:#1b1c20; }
html.dark-mode #nt_body .sbe-dist__stat{ color:#9ca3af; }
/* 라이트와 같은 두 톤 구조 — 인원은 '명'과 같은 톤, % 만 밝게(뒤에 둬 동점 특이성에서 이긴다) */
html.dark-mode #nt_body .sbe-dist__stat .sbe-num{ color:#9ca3af; }
html.dark-mode #nt_body .sbe-dist__stat .sbe-dist__pct{ color:#e5e7eb; }
/* 내 참여는 브랜드 판이라 --brand-soft(8%)가 다크에서 거의 안 보인다 — 보기 선택 상태와 같은 톤 */
html.dark-mode #nt_body .sbe-mine{ background:#202126; }
/* --brand-soft(8%)는 다크에서 거의 안 보인다 — 보기 선택 상태와 같은 톤으로 올린다 */
html.dark-mode #nt_body .sbe-mine.is-won{ background:rgba(39,113,227,.15); }
/* 칩 배경이 --card(#fff) 라 분기 없으면 다크에서 흰 칩이 된다(고스트 버튼 전례) */
html.dark-mode #nt_body .sbe-mine__answer{ color:#9ca3af; }
html.dark-mode #nt_body .sbe-mine__answer strong{ color:#e5e7eb; }
html.dark-mode #nt_body .sbe-slots__seg{ background:#2c2d33; }
html.dark-mode #nt_body .sbe-slots__seg.is-on{ background:#e5e7eb; }
/* 다크에서 --brand(#2771E3)를 그대로 쓰면 채운 칸(#e5e7eb)보다 어두워져 '가득 찼는데 더 흐리다'가
   된다 — 다크 강조에 쓰는 밝은 파랑으로 뒤집는다(칩 제목·결과 알림 액수와 같은 값). */
html.dark-mode #nt_body .sbe-slots.is-full .sbe-slots__seg.is-on{ background:#93c5fd; }
html.dark-mode #nt_body .sbe-slots__head b{ color:#f3f4f6; }
html.dark-mode #nt_body .sbe-foot{ border-top-color:#26272c; }
/* 글쓰기 단계형 폼 */
html.dark-mode #nt_body .sbe-step{ border-top-color:#2c2d33; }	/* 면 없는 구분선만 */
html.dark-mode #nt_body .sbe-step__title{ color:#e5e7eb; }
/* 면 위 흰 글자였을 땐 필요 없었지만, 번호가 맨몸 텍스트가 되면서 --brand 로는
   다크 배경(#1b1c20) 대비가 3.3:1 밖에 안 나온다 → 칩 활성 텍스트와 같은 톤으로 */
html.dark-mode #nt_body .sbe-step__num{ color:#93c5fd; }
html.dark-mode #nt_body .sbe-preset{ background:#202126; border-color:#2c2d33; }
html.dark-mode #nt_body .sbe-preset__name{ color:#e5e7eb; }
html.dark-mode #nt_body .sbe-preset.is-on{ border-color:var(--brand); background:rgba(39,113,227,.15); }
html.dark-mode #nt_body .sbe-step__none,
html.dark-mode #nt_body .sbe-summary{ background:#202126; border-color:#2c2d33; color:#d1d5db; }
/* 글쓰기 골격 — 면을 가진 요소는 전부 분기 필수 (--card 는 #fff 라 다크에서 흰 판이 된다) */
html.dark-mode #nt_body .sbe-w-topbar,
html.dark-mode #nt_body .sbe-w-card,
html.dark-mode #nt_body .sbe-w-panel{ background:#1b1c20; border-color:#2c2d33; }
html.dark-mode #nt_body .sbe-w-title,
html.dark-mode #nt_body .sbe-w-panel-t{ color:#e5e7eb; }
html.dark-mode #nt_body .sbe-w-title-input{ color:#e5e7eb; border-bottom-color:#3a3b42; }
html.dark-mode #nt_body .sbe-w-infotable{ border-top-color:#26272c; }
html.dark-mode #nt_body .sbe-w-infotable .sbe-irow{ border-bottom-color:#26272c; }
html.dark-mode #nt_body .sbe-w-thumb,
html.dark-mode #nt_body .sbe-w-thumb-hint{ background:#202126; }
/* 배경만 어둡게 하고 글자색을 두면 --sub(#676D76)가 다크 배경에서 안 읽힌다
   → bizevent .be-w-thumb-hint 다크 분기와 같은 값으로 통일 */
html.dark-mode #nt_body .sbe-w-thumb-hint{ color:#9ca3af; }
html.dark-mode #nt_body .sbe-w-thumb-empty{ border-color:#3a3b42; }
/* '썸네일 추가'가 --body(#4A4F57)로 바뀌면서 다크 배경(#202126)에서 읽히지 않는다
   → bizevent 의 .be-w-thumb-empty-t 다크 분기와 같은 값 */
html.dark-mode #nt_body .sbe-w-thumb-empty-t{ color:#d1d5db; }
html.dark-mode #nt_body .sbe-w-form .form-control,
html.dark-mode #nt_body .sbe-w-form .custom-select{ background-color:#202126; border-color:#2c2d33; color:#d1d5db; }
html.dark-mode #nt_body .sbe-w-form .form-control:disabled,
html.dark-mode #nt_body .sbe-w-form .custom-select:disabled{ background-color:#1b1c20; color:#6b7280; }
/* 체크 상태 칩 — --brand-soft(8%)는 다크에서 거의 안 보인다 (.sbe-preset.is-on 과 같은 톤) */
html.dark-mode #nt_body .sbe-chip > span{ background:#202126; border-color:#2c2d33; }
html.dark-mode #nt_body .sbe-chip > span b{ color:#e5e7eb; }
html.dark-mode #nt_body .sbe-chip input:checked + span{ background:rgba(39,113,227,.15); border-color:var(--brand); }
/* 제목 글자색은 라이트와 같은 이유로 선택 시에도 안 바꾼다(위 .sbe-chip:checked 주석 참조) */
html.dark-mode #nt_body .sbe-btn-ghost{ background:#202126; border-color:#2c2d33; color:#d1d5db; }
/* 참여 CTA — 잉크색 채움은 다크 배경에 묻힌다(면이 배경보다 어둡다). 밝은 회색 채움 + 검은 글자로
   뒤집어, 라이트에서와 같은 '화면에서 가장 진한 대비의 면'이라는 역할을 유지한다. */
html.dark-mode #nt_body .sbe-btn--join{ background:#e5e7eb; color:#1b1c20; }
html.dark-mode #nt_body .sbe-btn--join:not(:disabled):hover{ background:#f3f4f6; }
html.dark-mode #nt_body .sbe-btn--join:disabled:not(.is-loading){ background:#2c2d33; color:#6b7280; }
html.dark-mode #nt_body .sbe-w-minibtn,
/* 면·테두리가 없는 맨 아이콘이라 다크에서도 글자색만 조정한다 */
html.dark-mode #nt_body .sbe-opt-del{ color:#6b7280; }

/* ═══════════════════════════════════════════════════════════════════════════
   참여 결과 알림 (PC = 중앙 모달 / ≤768px = 하단 바텀시트)
   시스템 alert() 대체 — 조립·표시는 event.js 의 sbeDialog().

   ⚠ body 직속이라 #nt_body 토큰 스코프 밖이다 → 모든 값에 var(--토큰, 리터럴) 폴백 필수.
     (스코프 밖에서는 폴백이 항상 쓰이지만, 토큰명을 남겨 값의 출처를 추적 가능하게 둔다.)
   ⚠ 다크 규칙도 이 절에 함께 둔다 — 위 다크 블록은 전부 `#nt_body` 스코프라 여기엔 안 걸린다.
   z-index 10200 — 채팅/내정보 시트(1070)·하단 탭바(1050)·스크롤탑(1100)·감옥 모달(10000)
     전부보다 위. 결과 알림은 무엇에도 가리면 안 된다.
   배경 스크롤 잠금은 테마 정본 클래스 .sbc-lock-sbe (theme/Nariya-A/css/custom-main.css).
   ═══════════════════════════════════════════════════════════════════════════ */
.sbe-dlg-ov{
  position:fixed; inset:0; z-index:10200;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(15,23,42,.45);
  opacity:0; transition:opacity .18s ease;
}
.sbe-dlg-ov.is-open{ opacity:1; }
.sbe-dlg{
  width:100%; max-width:360px; padding:30px 24px 20px;
  background:var(--card,#fff); border-radius:var(--r-16,16px);
  box-shadow:0 18px 48px rgba(0,0,0,.22); text-align:center;
  transform:translateY(10px) scale(.98); transition:transform .18s ease;
}
.sbe-dlg-ov.is-open .sbe-dlg{ transform:none; }
/* 시트 손잡이 — 모바일에서만 보인다(PC 모달엔 끌 요소가 없다) */
.sbe-dlg__grip{ display:none; }
.sbe-dlg__msg{
  margin:0; font-size:1.2rem; font-weight:700; line-height:1.5;
  color:var(--ink,#1A1D21);
  /* 한글을 음절 단위로 끊지 않는다(.ts-toast 와 같은 관용구) */
  word-break:keep-all; overflow-wrap:break-word;
  /* 문구의 \n 을 줄바꿈으로 살린다 — alert() 를 대체하면서 기존 두 줄짜리 문구를 그대로 옮겼다 */
  white-space:pre-line;
}
/* 3단 구조 — 서버가 lead/title/sub/amount 슬롯을 채워 보낼 때만 나온다(event.js sbeDialog).
   lead 는 title 을 꾸미는 말이라 붙여 세우고(margin 4px), sub 는 별개 정보라 한 칸 띄운다. */
.sbe-dlg__lead{
  margin:0 0 4px; font-size:.95rem; font-weight:600; color:var(--sub,#676D76);
}
.sbe-dlg__sub{
  margin:16px 0 0; font-size:.95rem; font-weight:600; color:var(--sub,#676D76);
}
.sbe-dlg__amt{
  margin-left:8px; font-size:1.25rem; font-weight:700; color:var(--brand,#2771E3);
  /* 숫자 폰트 — #nt_body 의 .sbe-num 과 같은 토큰이지만 이 판은 body 직속이라 규칙을 따로 든다 */
  font-family:var(--font-num,"Oxanium","Paperozi",sans-serif);
}
/* 결과 톤은 '내 결과' 카드(.sbe-mine__head)와 같은 규칙을 쓴다 — 같은 결과가 두 화면에서
   다른 색으로 보이면 안 된다. 당첨=브랜드, 미당첨=흐림, 오류=경고. */
.sbe-dlg.is-won  .sbe-dlg__msg{ color:var(--brand,#2771E3); font-size:1.35rem; }
.sbe-dlg.is-lost .sbe-dlg__msg{ color:var(--muted,#8A9099); }
.sbe-dlg.is-error .sbe-dlg__msg{ font-size:1.05rem; font-weight:600; color:var(--sub,#676D76); }
.sbe-dlg__btns{ display:flex; gap:8px; margin-top:22px; }
.sbe-dlg__btn{
  flex:1 1 0; height:48px; padding:0 14px; border:1px solid transparent;
  border-radius:var(--r-10,10px); background:var(--brand,#2771E3); color:#fff;
  font-size:1rem; font-weight:700; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
.sbe-dlg__btn:hover{ background:var(--brand-hover,#1b64da); }
.sbe-dlg__btn--ghost{
  background:var(--card,#fff); border-color:var(--line-strong,#D5DAE0); color:var(--body,#4A4F57);
}
.sbe-dlg__btn--ghost:hover{ background:var(--card,#fff); border-color:var(--brand,#2771E3); color:var(--brand,#2771E3); }

@media (max-width:768px){
  /* 바텀시트 — 화면 맨 아래에서 올라온다. 형태는 테마의 내정보 시트(.sbc-myinfo-panel)와 같은
     관용구: bottom 고정 + translateY(100%) → 0, 상단만 라운드, 세이프에어리어 보정. */
  .sbe-dlg-ov{ align-items:flex-end; padding:0; }
  .sbe-dlg{
    max-width:none; padding:14px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius:var(--r-16,16px) var(--r-16,16px) 0 0;
    transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sbe-dlg__grip{
    display:block; width:40px; height:4px; margin:0 auto 18px;
    border-radius:999px; background:var(--line,#E5E8EB);
  }
  .sbe-dlg__btns{ margin-top:20px; }
}

html.dark-mode .sbe-dlg{ background:#1b1c20; box-shadow:0 18px 48px rgba(0,0,0,.5); }
html.dark-mode .sbe-dlg__msg{ color:#f3f4f6; }
html.dark-mode .sbe-dlg.is-won .sbe-dlg__msg{ color:#93c5fd; }
html.dark-mode .sbe-dlg.is-lost .sbe-dlg__msg,
html.dark-mode .sbe-dlg.is-error .sbe-dlg__msg{ color:#9ca3af; }
html.dark-mode .sbe-dlg__lead,
html.dark-mode .sbe-dlg__sub{ color:#9ca3af; }
html.dark-mode .sbe-dlg__amt{ color:#93c5fd; }
html.dark-mode .sbe-dlg__grip{ background:#3a3b42; }
html.dark-mode .sbe-dlg__btn--ghost{ background:#202126; border-color:#2c2d33; color:#d1d5db; }