/* ═══════════════════════════════════════════════════════════════════════════
 *  어두운 화면(다크모드) — 손으로 정하는 부분                   2026-08-08 신설
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ▍이게 왜 있나 — 꾸미기가 아니라 **안전 기능**이다
 *   이 사이트를 보는 사람은 유흥업소에서 일자리를 찾는 여성이고,
 *   **새벽에 어두운 데서 폰으로** 본다.
 *     · 밝은 화면은 지하철·가게 안에서 **옆 사람 눈에 띈다**
 *     · 어두운 데서 흰 바탕은 눈이 부셔 오래 못 본다(야간·노안 가독성)
 *   그래서 이 기능의 판정 기준은 "예쁜가"가 아니라
 *   **"안 띄나 · 안 부신가 · 그래도 다 읽히나"** 셋이다.
 *
 * ▍짜임새 (파일 세 개)
 *   ① css/_tokens.generated.css — 색 토큰 351개. tools/make_theme_tokens.js 가 만든다.
 *                                 손대지 마라(다시 만들면 지워진다).
 *   ② css/theme.css (이 파일)   — 토큰으로 안 되는 것들. 사람이 정한다.
 *   ③ include/header_meta.php   — 첫 칠하기 전에 도는 인라인 스크립트(번쩍임 방지)
 *
 * ▍바꾸는 스위치는 어디 있나
 *   · 관리자 : 환경설정 > 기본정보설정 > 「새 기능 켜기/끄기」 > 어두운 화면
 *              (`bb_config.use_dark_mode`, 함수 `bb_dark_enabled()`)
 *   · 손님   : PC 는 상단 메뉴 오른쪽 끝, 폰은 햄버거 메뉴를 펼친 맨 위
 *
 * ▍손님이 고른 값은 **브라우저에만** 남긴다 (localStorage `bb_theme`)
 *   🔴 쿠키로 하면 **요청마다 서버로 실려 가** 접속기록에 남는다.
 *      회원정보에 저장하면 **계정에 붙는다.** 이 사이트 손님은 흔적을 두려워한다.
 *      localStorage 는 서버로 가지 않고, 손님이 "인터넷 사용기록 삭제"를 하면 같이 지워진다.
 *      (그래서 값이 없을 때는 **기기 설정**(prefers-color-scheme)을 따른다)
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. 바탕
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ `body` 에는 배경 지정이 **아예 없었다**(브라우저 기본 흰색). 그래서 토큰만으로는
      페이지 바탕이 안 바뀐다. 여기서 직접 칠한다.
   ⚠️ `color-scheme` 을 반드시 준다. 이게 있어야 **선택상자·달력·스크롤바** 같은
      브라우저가 그리는 부분까지 어두워진다. 없으면 목록만 흰 판으로 튀어나온다.  */
:root{ color-scheme:light; }

@media screen{
	/* ⚠️ `color-scheme` 도 **화면일 때만** 준다. 인쇄에까지 걸면 미리보기의 입력칸·선택상자가
	   어둡게 그려진다. 인쇄물은 언제나 밝은 화면이어야 한다. */
	html[data-theme="dark"]{ color-scheme:dark; }

	html[data-theme="dark"],
	html[data-theme="dark"] body{
		background:#14100F;
		color:var(--c-fg-333,#333);
	}
	/* 첫 칠하기 전에 스크립트가 붙여 주는 값(아래 3번). 화면이 흰색으로 번쩍이지 않게 한다. */
	html[data-theme="dark"] #wrap,
	html[data-theme="dark"] #container{ background:transparent; }
}


/* ───────────────────────────────────────────────────────────────────────────
   2. 토큰으로 못 잡는 자리
   ─────────────────────────────────────────────────────────────────────────── */
@media screen{

	/* 업소 엠블럼 — 색이 업소명에서 뽑은 **숫자(색상값)** 라 토큰으로 못 바꾼다.
	   밝기·채도만 어두운 화면용으로 갈아 끼운다(css/style.css 3911·4295줄이 이 값을 쓴다). */
	html[data-theme="dark"]{
		--eh-bg-s:30%;  --eh-bg-l:20%;
		--eh-fg-s:55%;  --eh-fg-l:78%;
	}

	/* 그림자 — 어두운 바탕에서 검은 그림자는 안 보인다. 대신 **얇은 테두리**로 칸을 나눈다.
	   ⚠️ 그림자를 지우면 카드 경계가 사라져 목록이 한 덩어리로 보인다(실측). */
	html[data-theme="dark"] .m_title,
	html[data-theme="dark"] .popup_layer,
	html[data-theme="dark"] .bb_bottom_nav{
		box-shadow:0 0 0 1px rgba(255,255,255,.07);
	}

	/* 사진·배너는 그대로 둔다. 다만 **아주 밝은 이미지**는 새벽에 눈이 부시다.
	   ⚠️ 광고 배너를 흐리게 만들면 돈 받은 광고가 죽는다 — 손대지 않는다.
	      대신 장식용 아이콘만 살짝 낮춘다. */
	html[data-theme="dark"] .axi{ opacity:.94; }

	/* 입력칸 — 브라우저 기본값이 흰 바탕이라 따로 칠한다. */
	html[data-theme="dark"] input[type="text"],
	html[data-theme="dark"] input[type="password"],
	html[data-theme="dark"] input[type="number"],
	html[data-theme="dark"] input[type="tel"],
	html[data-theme="dark"] input[type="email"],
	html[data-theme="dark"] input[type="search"],
	html[data-theme="dark"] input[type="date"],
	html[data-theme="dark"] textarea,
	html[data-theme="dark"] select{
		background:#251F1D;
		color:#EDE6E2;
		border-color:#3B3330;
	}
	html[data-theme="dark"] ::placeholder{ color:#9A8F8B; opacity:1; }

	/* 로고 — 원본이 **투명 배경에 진한 글자**라 어두운 바탕에서 묻힌다.
	   🔴 색을 뒤집으면(invert) 브랜드 코럴이 청록으로 바뀐다. 그러면 안 된다.
	      대신 로고 뒤에만 **크림색 판**을 깐다 — 브랜드 색은 하나도 안 건드린다.
	   ⚠️ 짐작이 아니라 **재고 넣었다** — `data/logo/logo_top.png` 의 불투명 픽셀 43,864개 중
	      **36%가 밝기 80 미만**(평균 153/255)이다. 어두운 머리말(#211D1B) 위에서는
	      그 3분의 1이 사실상 안 보인다. */
	html[data-theme="dark"] header .top_area .logo a,
	html[data-theme="dark"] footer .logo img{
		background:#FFFBF8;
		border-radius:8px;
		padding:4px 10px;
		display:inline-block;
	}
}


/* ───────────────────────────────────────────────────────────────────────────
   3. 🔴 유료 강조 상품이 어두운 화면에서 **묻히지 않게**
   ───────────────────────────────────────────────────────────────────────────
   업소가 돈 주고 산 옵션 여섯이다 —
   형광펜 · 글자색 · 굵은글자 · 반짝칼라 · 테두리강조 · 급구 아이콘.
   🔴 어두운 바탕에서 이게 안 보이면 **그날로 돈 받고 효과 없는 상품**이 된다.

   ⚠️ **업소가 고른 색은 절대 바꾸지 않는다.** 대비만 맞춘다.
      값은 PHP(engine/class/bb_job.class.php)가 미리 계산해 인라인으로 넘겨준다:
        --bb-on-neon    형광펜 위에 얹을 글자색 (형광펜만 샀을 때)
        --bb-fg-dark    업소가 고른 글자색을 **어두운 화면에서만** 밝힌 값
        --bb-edge-l/d   테두리강조 색의 밝은화면/어두운화면 값
   ⚠️ 인라인 style 은 보통 CSS 보다 세지만, **author `!important` 는 인라인(비!important)을 이긴다.**
      그래서 아래 `!important` 들이 실제로 먹는다.                              */
@media screen{

	/* ① 형광펜만 샀을 때 — 밝은 형광색 위에 밝은 글자가 오면 안 읽힌다.
	      PHP 가 그 형광색에 맞춰 검정/흰색 중 대비가 높은 쪽을 골라 넘겨준다. */
	html[data-theme="dark"] [style*="--bb-on-neon"]{
		color:var(--bb-on-neon) !important;
	}

	/* ② 글자색을 샀을 때 — 업소가 고른 **색상은 그대로**, 밝기만 올린 값을 쓴다.
	      ⚠️ 이 규칙은 ①보다 **뒤에** 와야 한다. 둘 다 샀으면 업소가 고른 색이 이겨야 하고,
	         그때 PHP 는 형광펜 바탕 기준으로 계산해 넘긴다. */
	html[data-theme="dark"] [style*="--bb-fg-dark"]{
		color:var(--bb-fg-dark) !important;
	}

	/* ③ 굵은글자 — `.fwb {color:#000}` 이었다. 토큰으로 이미 밝은 글자로 바뀌지만,
	      **형광펜/글자색과 겹칠 때** 그 인라인 값이 이겨야 하므로 여기서 강제하지 않는다.
	      (겹칠 때의 순서는 ①②가 정한다) */

	/* ④ 테두리강조 — 관리자가 고른 색이 어두운 바탕에서 묻힐 수 있다(예: 진보라 #9600ff).
	      색을 바꾸지 않고 **밝기만** 올린 값으로 갈아 끼운다. */
	[style*="--bb-edge-l"]{ --bb-edge:var(--bb-edge-l); }
	html[data-theme="dark"] [style*="--bb-edge-d"]{ --bb-edge:var(--bb-edge-d); }
}

/* 관리자가 색을 안 정한 등급은 브랜드 코럴로 테두리를 그린다.
   🔴 코럴 원색(#C64B45)은 **어두운 바탕에서 대비 2.6** 밖에 안 나온다(실측) — 테두리로는 미달이다.
      그래서 이 자리 전용 토큰을 따로 둔다. 버튼 바탕으로 쓰는 `--brand` 는 건드리지 않는다
      (그 위엔 흰 글자가 얹혀 있어 원색이 맞다).
   ⚠️ `@media screen` 밖에 둔다 — 밝은값은 인쇄에서도 필요하다. */
:root{ --bb-edge-brand:#C64B45; }
@media screen{
	html[data-theme="dark"]{ --bb-edge-brand:#D96A62; }   /* 어두운 바탕 대비 4.2 */

	/* ⑤ 안전망 — 위 값이 안 실린 옛 화면에서도 **강조된 칸인 줄은 알아보게** 한다.
	      가느다란 흰 선 하나. 업소가 고른 색을 가리지 않는다. */
	html[data-theme="dark"] .bordercolor,
	html[data-theme="dark"] .bb_border_strong{
		outline:1px solid rgba(255,255,255,.22);
		outline-offset:-3px;
	}

	/* ⑥ 급구·아이콘 GIF — 흰 테두리가 있는 그림이라 어두운 바탕에서도 보인다.
	      다만 아주 어두운 아이콘을 나중에 올릴 수 있으므로 살짝 띄운다. */
	html[data-theme="dark"] p.title img{
		background:rgba(255,255,255,.06);
		border-radius:3px;
	}
}


/* ───────────────────────────────────────────────────────────────────────────
   4. 바꾸는 버튼
   ───────────────────────────────────────────────────────────────────────────
   🔴 누르는 크기는 **px 로 못 박는다.** 이 사이트는 `html{font-size:62.5%}` 인데
      좁은 폰(≤650px)에서 `66%` 로 **더 작아진다**. rem 으로 잡으면 정작 손이 작은
      화면에서 버튼이 쪼그라든다. 최소 44px.
   ⚠️ 화면에 떠 있는 버튼으로 만들지 않았다 — 오른쪽 아래에 이미
      「이 사이트 나가기」가 떠 있고, 겹치면 로그인 칸을 덮는다(08-08 실제 사고).   */
.bb-theme-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	/* 🔴 44px 은 **최소**다. 글자가 들어가면 그만큼 넓어져야 한다.
	   ⚠️ `.m_top` 안의 button 에 폭을 정해 둔 옛 규칙이 있어, 폰 메뉴에서 버튼이
	      44px 로 눌려 「밝게」가 두 줄로 깨졌다(320px 실측). 그래서 폭을 못 박고 줄바꿈을 막는다. */
	width:auto;
	flex:0 0 auto;
	white-space:nowrap;
	min-width:44px;
	min-height:44px;
	padding:0 12px;
	box-sizing:border-box;
	border:0;
	border-radius:8px;
	background:transparent;
	color:inherit;
	font-family:var(--font-heading);
	font-size:14px;
	line-height:1;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}
.bb-theme-btn .bb-theme-ico{ font-size:18px; line-height:1; }
.bb-theme-btn:hover{ background:rgba(0,0,0,.08); }

/* PC 상단 메뉴 안.
   🔴 **띠 색이 관리자 설정(`bb_config.menu_skin`)에 따라 달라진다.** 흰 글자로 못 박으면 안 된다 —
      처음에 그렇게 했다가 skin1(흰 띠)에서 **흰 글자가 흰 바탕에 얹혀 안 보였다**(대비 1.0, 실측).
        · skin1 = 흰 띠  + 진한 글자 (css/style.css:153)
        · skin2 = 코럴 띠 + 흰 글자   (Design 02 — css/style.css:187~)
      그래서 띠 종류를 그대로 따라간다. 사장님이 디자인을 바꿔도 버튼이 따라온다. */
.nav_wrap.skin1 .bb-theme-btn{ color:var(--c-fg-333,#333); }
.nav_wrap.skin1 .bb-theme-btn:hover{ background:rgba(0,0,0,.07); }
.nav_wrap.skin2 .bb-theme-btn{ color:#fff; }
.nav_wrap.skin2 .bb-theme-btn:hover{ background:rgba(255,255,255,.18); }
#head_top .right_nav li.bb-theme-li{ display:flex; align-items:center; }
#head_top .right_nav li.bb-theme-li::after{ display:none; }

/* 폰 햄버거 메뉴 안 — 맨 위 회원 안내줄 바로 아래에 한 줄로 놓는다.
   🔴 **선택자를 길게 쓴 이유가 있다.** 이 자리에는 옛 규칙 두 개가 이미 걸려 있다:
        `.m_menu .m_top>div        {height:70px; overflow:hidden; padding:0 2rem}`
        `.m_menu .m_top>div button {width:35px; height:35px; float:right; border-radius:50px}`
      내 `.bb-theme-btn`(클래스 하나)은 저 둘(클래스 둘+요소)에 **명시도로 진다.**
      그대로 두면 버튼이 **35px 동그라미로 눌려 「밝게」가 두 줄로 깨진다**(320px 실측).
      그래서 여기서는 클래스 세 개짜리로 확실히 이긴다. */
.m_nav .m_menu .m_top>div.bb-theme-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	height:auto;
	overflow:visible;
	padding:6px 2rem 12px;
}
.m_nav .bb-theme-row .bb-theme-label{ font-size:14px; opacity:.85; color:#fff; }
.m_nav .bb-theme-row .bb-theme-btn{
	width:auto;
	height:auto;
	float:none;
	border:1px solid rgba(255,255,255,.35);
	border-radius:8px;
	color:#fff;
}

/* 성인인증 화면 — footer 가 안 도는 화면이라 버튼을 따로 심는다.
   🔴 여기가 손님의 **첫 화면**이다. 여기서 못 바꾸면 첫 화면이 흰색으로 번쩍인다. */
.adult .bb-theme-row{
	position:absolute;
	top:10px;
	right:10px;
	z-index:2;
}
.adult .bb-theme-btn{
	border:1px solid var(--c-ln-ddd,#ddd);
	background:var(--c-bg-fff,#fff);
	color:var(--c-fg-555,#555);
}

@media screen{
	html[data-theme="dark"] .bb-theme-btn:hover{ background:rgba(255,255,255,.12); }
}

/* 인쇄할 때는 버튼이 필요 없다. */
@media print{
	.bb-theme-btn, .bb-theme-row, .bb-theme-li{ display:none !important; }
}