@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;       /* 마감 직전 카운트다운 강조 (뱃지 아님) */
  --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;                 /* 칩 텍스트 */
}

/* ── 숫자 폰트 ── */
#nt_body .sbe-num{ font-family:var(--font-num); font-weight:700; }

/* =====================================================================
 * 1. 목록 — 필터탭
 * ===================================================================== */
/* pill 탭은 보드가 실제 분류(sca)를 쓸 때의 보조 표시 전용 —
   기본 경로는 category.skin.php(#bo_cate) 재사용이라 이 스타일을 타지 않는다 (list.skin.php 참조) */
#nt_body .sbe-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px;
}
#nt_body .sbe-tab{
  display:inline-block; padding:7px 16px; font-size:.82rem; font-weight:500;
  color:var(--sub); background:var(--field-bg); border-radius:var(--r-pill);
  text-decoration:none; white-space:nowrap; transition:all .15s;
}
#nt_body .sbe-tab:hover{ color:var(--brand); background:var(--brand-soft); text-decoration:none; }
#nt_body .sbe-tab.is-on{ color:#fff; background:var(--brand); font-weight:600; }

/* ── 목록 툴바 '내 참여 내역' 링크 ──
   생김새는 툴바 아이콘 버튼(.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열 시절의 문제가 모바일에서 재현된다). */
#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-16); 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;
}
/* 칩은 상태 불문 다크 통일 (사용자 확정) — 상태 구분은 좌상단 뱃지가 담당 */

/* ②~④ 카드 본문 */
#nt_body .sbe-card__body{ display:flex; flex-direction:column; gap:10px; padding:14px 16px 13px; flex:1; }
#nt_body .sbe-card__title{
  font-size:.98rem; font-weight:700; color:var(--ink); margin:0; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#nt_body .sbe-card__pointline{ display:flex; align-items:baseline; gap:8px; margin-top:auto; }
#nt_body .sbe-card__point{ font-size:1.35rem; color:var(--brand); font-weight:800; line-height:1.1; }
#nt_body .sbe-card__ruledesc{ font-size:.92rem; color:var(--muted); }
#nt_body .sbe-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line-soft); padding-top:10px;
}
#nt_body .sbe-card__joins{ font-size:.8rem; color:var(--muted); }
#nt_body .sbe-card__cta{ font-size:.84rem; font-weight:700; }
#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 — 목록 미니/뷰 공용)
 * ===================================================================== */
#nt_body .sbe-gauge{
  position:relative; height:8px; background:var(--field-bg); border-radius:var(--r-pill); overflow:hidden;
}
#nt_body .sbe-gauge--mini{ height:6px; }
#nt_body .sbe-gauge__fill{
  position:absolute; left:0; top:0; bottom:0; background:var(--brand); border-radius:var(--r-pill);
  transition:width .3s;
}
#nt_body .sbe-gauge__fill.is-full{ background:var(--sbe-warn); }
#nt_body .sbe-gauge__meta{ font-size:.74rem; color:var(--muted); margin-top:3px; }

/* =====================================================================
 * 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 폰트로 통일. */
#nt_body .bo-v-info__val .sbe-cd{ font-family:var(--font-num); font-weight:700; }
/* 카운트다운 색상은 놓인 배경별로 분리 —
   .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)와는 굵기+크기 두 단계 차 */
#nt_body .sbe-question{ font-size:1.25rem; font-weight:600; color:var(--ink); line-height:1.45; margin-bottom:16px; }

/* 보기 (참여전)
   표면은 흰색(--card, 사용자 확정). 흰 배경은 그 자체로 경계가 없어 테두리가 형태를 만든다 —
   그래서 border 를 transparent 가 아닌 --line 실선으로 둔다(회색 채움을 지운 자리를 선이 대신함).
   선택 상태는 브랜드 톤으로 반전. */
#nt_body .sbe-opts{ display:flex; gap:10px; margin-bottom:16px; }
#nt_body .sbe-opts--row{ flex-direction:row; flex-wrap:wrap; }
#nt_body .sbe-opts--col{ flex-direction:column; }
#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-opts--row .sbe-opt{ flex:1 1 0; justify-content:center; min-width:72px; }
#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);
}
#nt_body .sbe-opt:focus-within{ box-shadow:0 0 0 3px var(--field-focus-ring); }
/* 모바일에서 가로형 3~4지선다를 한 줄에 밀어넣으면 라벨이 두 줄로 꺾인다
   (렌더러가 허용하는 라벨 최대 8자 = 보기 1.05rem 기준 약 175px 필요 → 폭 360px 에 3개는 불가).
   한 줄 2개까지만 두고 나머지는 다음 줄로 흘린다.
   ▶ 폭 360px 에서 2개 배치 시 칸당 약 158px 이라 8자 라벨은 여기서도 두 줄로 꺾인다.
     .sbe-opt 가 min-height 만 잡고 높이는 자라므로 레이아웃은 깨지지 않는다(허용된 동작). */
@media (max-width: 575px){
  #nt_body .sbe-opts{ gap:8px; }
  #nt_body .sbe-opts--row .sbe-opt{ flex:1 1 calc(50% - 4px); }
}
/* 질문·게이지와 참여 폼 사이 간격 (질문의 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); }

/* 버튼 */
#nt_body .sbe-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 22px; border:none; border-radius:var(--r-12);
  font-size:.92rem; 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 — 보기(52px)와 같은 높이선에서 한 단 더 크게. 카드에서 유일한 채움 버튼 */
#nt_body .sbe-btn--join{ height:50px; font-size:1.05rem; background:var(--brand); color:#fff; }
/* 보기 선택 전('선택하세요')에는 채움을 벗고 기본 버튼 모습으로 돌아간다 —
   잠긴 버튼이 브랜드색이면 눌리는 것으로 읽힌다. 전송 중(.is-loading)은 제외:
   그때는 이미 고른 상태라 브랜드색을 유지해야 진행 중으로 보인다. */
#nt_body .sbe-btn--join:disabled:not(.is-loading){
  background:var(--field-bg); color:var(--muted); box-shadow:none;
}
#nt_body .sbe-btn--join:not(:disabled):hover{ background:var(--brand-hover); 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); }
#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:3px 9px; border-radius:var(--r-4);
  font-size:.8rem; 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); }

/* 당첨자 */

/* 내 참여 — 참여를 마친 사람에게는 이 블록이 화면의 결론이라, 회색 필드가 아니라
   브랜드 톤 판으로 세운다(--brand-soft 8% + --brand 실선). 분포 박스(흰 판)와도 구분된다. */
/* 테두리 없음(사용자 확정) — 브랜드 틴트 배경만으로 판을 세운다. 선까지 두르면 강조가 이중이다. */
#nt_body .sbe-mine{ padding:18px 20px; border:none; border-radius:var(--r-12); background:var(--brand-soft); }
/* 미당첨 — 브랜드 톤 판 위에 '미당첨'이 놓이면 축하처럼 읽힌다. 중립 회색 판으로 내린다. */
#nt_body .sbe-mine.is-lost{ background:var(--field-bg); }
/* 간격은 아래 형제들이 margin-top 으로 갖는다 — '내 선택' 줄은 분포가 대신 보여줄 때
   통째로 빠지므로(sbc_event.lib.php), 머리글에 margin-bottom 을 주면 그때만 여백이 겹쳐 벌어진다. */
#nt_body .sbe-mine__head{
  display:flex; align-items:center; gap:8px;
  font-size:1.05rem; font-weight:700; color:var(--brand); margin:0;
}
/* '변경 불가' 칩 — .7rem(11px) + --muted 는 브랜드 톤 판 위에서 뭉개져 흐릿하게 보였다.
   크기를 올리고 톤을 한 단(--sub) 진하게. 굵기는 500 으로 낮춘다: 작은 글자에 700 을 주면
   획이 붙어 오히려 더 흐려 보인다(머리글과 경쟁하지 않게 하는 효과도 있다). */
#nt_body .sbe-mine__lock{
  margin-left:auto; flex:0 0 auto; padding:3px 9px; border-radius:var(--r-4);
  font-size:.8rem; font-weight:500; line-height:1.5; letter-spacing:0;
  background:var(--card); color:var(--sub); border:1px solid var(--line);
}
/* 내 선택 — 이 블록에서 사람이 실제로 읽는 한 줄. 머리글보다 크게 둔다 */
#nt_body .sbe-mine__answer{ font-size:1.2rem; color:var(--sub); margin:10px 0 0; }
#nt_body .sbe-mine__answer strong{ color:var(--ink); font-weight:700; }
/* 결과가 나오면 머리줄 라벨 자체가 결과 문구로 바뀐다 — 결과 전용 요소를 따로 두지 않는다.
   그때만 한 단 키우고 색으로 결과를 말한다(결과 전 '참여 완료'는 기본 브랜드 톤 1.05rem 유지). */
#nt_body .sbe-mine__head.is-won,
#nt_body .sbe-mine__head.is-lost,
#nt_body .sbe-mine__head.is-reverted{ font-size:1.15rem; }
#nt_body .sbe-mine__head.is-won{ color:var(--brand); }
#nt_body .sbe-mine__head.is-lost{ color:var(--muted); }
#nt_body .sbe-mine__head.is-reverted{ color:var(--sbe-warn); }
/* 지급 포인트 — 머리줄 우측 끝('변경 불가' 칩과 같은 자리). 숫자는 .sbe-num(Oxanium),
   'P'는 본문 글꼴이라 둘을 flex 로 묶지 않는다(묶으면 히어로 정보표에서 겪은 단위 어긋남 재발). */
#nt_body .sbe-mine__point{
  margin-left:auto; flex:0 0 auto; font-size:1.15rem; font-weight:700; color:var(--brand);
}
/* 미당첨의 0 P 는 브랜드색을 쓰지 않는다 — 파란 숫자는 받은 것처럼 읽힌다 */
#nt_body .sbe-mine__point.is-zero{ color:var(--muted); }
/* 축포 이모지 — 글자와 같은 크기(1em). 조금이라도 키우면 그 줄만 커 보여
   같은 크기로 맞춘 '당첨/미당첨'이 서로 달라 보인다.
   세로 정렬은 머리줄의 flex(align-items:center)가 잡는다(이모지 baseline 은 글꼴마다 다르다). */
#nt_body .sbe-mine__ic{ font-size:1em; line-height:1; }

/* 힌트/푸터 */
#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; }

/* ── 공통 조각 ── */
#nt_body .sbe-req{ color:var(--sbe-warn); }
#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); }
#nt_body .sbe-counter{ font-size:.78rem; color:var(--muted-2); font-family:var(--font-num); }
#nt_body .sbe-counter.is-full{ color:var(--sbe-warn); font-weight:700; }

/* ── A. 상단바 (제목 + 진행률) ── */
#nt_body .sbe-w-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  /* 높이·타이포는 업체이벤트(bizevent .be-w-topbar)와 동일 규격으로 통일.
     bizevent 는 .be-write 가 line-height:1.6 을 깔아주지만 이 스킨엔 그런 기준선이 없어,
     같은 높이가 나오도록 제목·부제에 line-height 를 명시한다. */
  padding:13px 18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-16);
}
#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; font-size:16px;   /* 업체이벤트 .be-w-mark 와 동일 */
  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.6; }
#nt_body .sbe-w-sub{ font-size:12px; line-height:1.6; color:var(--muted); margin-top:1px; }
#nt_body .sbe-w-prog{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
#nt_body .sbe-w-prog-label{ font-family:var(--font-num); font-size:12px; font-weight:800; color:var(--brand); }
#nt_body .sbe-w-prog-track{
  display:block; width:110px; height:6px; overflow:hidden;
  border-radius:var(--r-pill); background:var(--field-bg);
}
#nt_body .sbe-w-prog-fill{
  display:block; width:0; height:100%; border-radius:var(--r-pill);
  background:var(--brand); transition:width .2s;
}

/* ── B. 기본 정보 카드 (좌 썸네일 / 우 제목+정보표) ── */
#nt_body .sbe-w-card{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-16);
}
/* 썸네일 열 폭 = 썸네일 높이(4:3)를 결정한다. 320px 시절 좌열이 우열(제목+정보표)보다
   길어져 카드 우측 하단에 빈 여백이 남았다 → 폭을 줄여 세로도 함께 줄인다. */
#nt_body .sbe-w-col-l{ flex:0 0 264px; max-width:264px; }
/* 세로 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 */
#nt_body .sbe-w-thumb{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-12); 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; 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;
  border:2px dashed var(--line-strong); border-radius:var(--r-12); 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); }
#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-8);
  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); }

/* 밑줄형 제목 */
#nt_body .sbe-w-tagline{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
#nt_body .sbe-w-tag{
  font-size:.86rem; font-weight:700; color:var(--brand);
  background:var(--brand-soft); border-radius:var(--r-6); padding:3px 10px;
}
#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:1.19rem; 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:.84rem; font-weight:600; color:var(--muted); }
#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-8);
  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-8);
  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; }
#nt_body .sbe-ival:not(.sbe-ival--stack) > .sbe-w-dt{ flex:0 1 250px; min-width:210px; }
/* 문항(질문)도 같은 취지 — 한 줄 질문이라 폼 끝까지 늘어날 이유가 없다.
   위 일반 규칙(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); }
#nt_body .sbe-chip input:checked + span{
  border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 1px var(--brand) inset;
}
#nt_body .sbe-chip input:checked + span b{ color:var(--brand); }
#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-16); overflow:hidden;
}
#nt_body .sbe-w-panel-h{ display:flex; align-items:center; gap:8px; padding:14px 18px 0; }
#nt_body .sbe-w-bar{ display:inline-block; width:3px; height:15px; border-radius:var(--r-4); background:var(--brand); }
/* STEP 제목(.sbe-step__title)과 같은 크기 — 같은 층위의 섹션 머리라 위계를 나누지 않는다 */
#nt_body .sbe-w-panel-t{ font-size:1.12rem; font-weight:700; color:var(--ink); }
#nt_body .sbe-w-panel-b{ padding:14px 18px 18px; }
#nt_body .sbe-w-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px;
}
#nt_body .sbe-w-captcha{ flex:1 1 auto; min-width:0; }
#nt_body .sbe-w-btns{ display:flex; gap:8px; margin-left:auto; }
#nt_body .sbe-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:130px; height:42px; padding:0 18px;
  border:1px solid transparent; border-radius:var(--r-10);
  font-size:.92rem; font-weight:700; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
#nt_body .sbe-btn-primary{ background:var(--brand); color:#fff; }
#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-strong); color:var(--body); }
#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-8);
  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; }
  #nt_body .sbe-btn{ flex:1 1 0; min-width:0; }
}
@media (max-width: 575px){
  #nt_body .sbe-w-topbar{ padding:12px 14px; }
  #nt_body .sbe-w-prog-track{ width:72px; }
  #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-8);
  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-8); 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); }
#nt_body .sbe-preset.is-on{
  border-color:var(--brand); background:var(--brand-soft);
  box-shadow:0 0 0 1px var(--brand) inset;
}
#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; }

/* ── 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-tab{ background:#25262b; color:#9ca3af; }
html.dark-mode #nt_body .sbe-tab.is-on{ background:var(--brand); color:#fff; }
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; }
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:rgba(39,113,227,.15); }
html.dark-mode #nt_body .sbe-mine.is-lost{ background:#202126; }
/* 칩 배경이 --card(#fff) 라 분기 없으면 다크에서 흰 칩이 된다(고스트 버튼 전례) */
html.dark-mode #nt_body .sbe-mine__lock{ background:#1b1c20; border-color:#2c2d33; color:#9ca3af; }
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-gauge{ background:#2c2d33; }
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,
html.dark-mode #nt_body .sbe-w-prog-track{ 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); }
html.dark-mode #nt_body .sbe-chip input:checked + span b{ color:#93c5fd; }
html.dark-mode #nt_body .sbe-btn-ghost{ background:#202126; border-color:#2c2d33; color:#d1d5db; }
html.dark-mode #nt_body .sbe-w-minibtn,
/* 면·테두리가 없는 맨 아이콘이라 다크에서도 글자색만 조정한다 */
html.dark-mode #nt_body .sbe-opt-del{ color:#6b7280; }