/* ============================================================
   플럭스허브 디자인 v2 — 잉크 블랙 + 라임 (2026-10-04)
   계획: docs/plans/2026-10-04-fluxhub-design-renewal.md §3-1, §4
   지금은 body.fx-v2(?design=v2 쿠키)에서만 켜진다. 승인 후 기본값으로 승격.

   원칙
   - 글자·주 버튼은 잉크(#111). 라임(#C8F05A)은 "면"으로만 쓴다(흰 바탕 글자색 금지 — 대비 1.3:1).
   - 회색은 한 계열(살짝 따뜻한 중성 회색). 그림자는 2단계만.
   - 에메랄드 계열은 남김없이 덮는다(토큰 + 하드코딩 값 덮기).
   ============================================================ */

/* ── 1. 토큰 ─────────────────────────────────────────────── */
body.fx-v2 {
	--v2-ink:        #111111;
	--v2-ink-2:      #3a3a37;
	--v2-ink-3:      #6b6b66;   /* 흰 바탕 대비 5.3:1 */
	--v2-ink-4:      #9a9a94;   /* 장식·큰 글자 */
	--v2-bg:         #ffffff;
	--v2-surface:    #f7f7f5;   /* 대표: #f2f2ef 는 섹션 배경으로 침침하다 → 한 단계 밝게 */
	--v2-surface-2:  #efefec;
	--v2-line:       #e4e4df;
	--v2-line-2:     #d3d3cc;
	/* 라임 = 사이트 설정의 「대표 색」. --fh-brand* 는 대표 색을 저장했을 때만 :root 에 나온다(functions.php) → 없으면 라임 그대로 */
	--v2-lime:       var(--fh-brand, #c8f05a);
	--v2-lime-2:     var(--fh-brand-deep, #b5e03c);   /* 라임 호버 */
	--v2-lime-soft:  var(--fh-brand-soft, #eef9cf);
	--v2-lime-ink:   var(--fh-brand-contrast, #2c3a00);   /* 라임 면 위 보조 글자 */
	--v2-ok:         #1f7a3a;
	--v2-warn:       #9a5b00;
	--v2-danger:     #c2352b;
	--v2-info:       #2d5bd8;
	--v2-shadow-1:   0 1px 2px rgba(17, 17, 17, .06), 0 2px 8px rgba(17, 17, 17, .04);
	--v2-shadow-2:   0 12px 40px rgba(17, 17, 17, .10), 0 2px 6px rgba(17, 17, 17, .05);
	--v2-r-sm: 8px;
	--v2-r:    14px;
	--v2-r-lg: 20px;

	/* 기존 --fs-* 를 v2 값으로 재매핑 → site.css·renewal/*.css 가 한 번에 따라온다 */
	--fs-bg:          var(--v2-bg);
	--fs-bg-soft:     var(--v2-surface);
	--fs-bg-sunken:   var(--v2-surface-2);
	--fs-ink:         var(--v2-ink);
	--fs-ink-2:       var(--v2-ink-2);
	--fs-ink-3:       var(--v2-ink-3);
	--fs-ink-4:       var(--v2-ink-4);
	--fs-line:        var(--v2-line);
	--fs-line-strong: var(--v2-line-2);
	--fs-accent:      var(--v2-ink);
	--fs-accent-ink:  var(--v2-ink);
	--fs-accent-soft: var(--v2-lime-soft);
	--fs-accent-grad: var(--v2-ink);
	--fs-green:       var(--v2-lime);
	--fs-teal:        var(--v2-lime);
	--fs-purple:      var(--v2-ink);
	--fs-indigo:      var(--v2-ink);
	--fs-dark:        var(--v2-ink);
	--fs-dark-2:      #1b1b19;
	--fs-dark-line:   #2c2c29;
	--fs-shadow-sm:   var(--v2-shadow-1);
	--fs-shadow:      var(--v2-shadow-2);
	--fs-shadow-lg:   var(--v2-shadow-2);
	--fs-r:     var(--v2-r);
	--fs-r-lg:  var(--v2-r-lg);
	--fs-r-xl:  var(--v2-r-lg);
	--fs-r-2xl: 24px;

	background: var(--v2-bg);
	color: var(--v2-ink);
}
body.fx-v2 ::selection { background: var(--v2-lime); color: var(--v2-ink); }

/* ── 2. 타이포 ────────────────────────────────────────────── */
body.fx-v2 .fs-h2,
body.fx-v2 .fx-title {
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.22;
	color: var(--v2-ink);
}
body.fx-v2 .fs-lead,
body.fx-v2 .fx-sub { color: var(--v2-ink-3); }
/* 초록 아이브로우 → 작은 검정 라벨 + 라임 점. 장식이 아니라 "구역 이름"으로만 읽히게 */
body.fx-v2 .fx-eyebrow,
body.fx-v2 .fs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--v2-ink-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	background: none;
}
body.fx-v2 .fx-eyebrow::before,
body.fx-v2 .fs-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--v2-lime);
	box-shadow: 0 0 0 1px rgba(17, 17, 17, .25);
}
body.fx-v2 .fs-hcar__hl,
body.fx-v2 .fs-hl {
	color: inherit;
	background: linear-gradient(transparent 58%, var(--v2-lime) 58%, var(--v2-lime) 92%, transparent 92%);
	padding: 0 .08em;
}
body.fx-v2 [class*="tabular"],
body.fx-v2 [data-count] { font-variant-numeric: tabular-nums; }

/* ── 3. 버튼 ──────────────────────────────────────────────── */
body.fx-v2 .fs-btn {
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: -.01em;
}
body.fx-v2 .fs-btn:hover { transform: none; }
body.fx-v2 .fs-btn:active { transform: translateY(1px); }
body.fx-v2 .fs-btn--primary,
body.fx-v2 .fs-site .fs-btn--primary,
body.fx-v2 .fs-btn--accent,
body.fx-v2 .fs-site .fs-btn--accent {
	background: var(--v2-ink);
	border-color: var(--v2-ink);
	color: #fff;
	box-shadow: none;
}
body.fx-v2 .fs-btn--primary:hover,
body.fx-v2 .fs-site .fs-btn--primary:hover,
body.fx-v2 .fs-btn--accent:hover,
body.fx-v2 .fs-site .fs-btn--accent:hover {
	background: #000;
	border-color: #000;
	color: var(--v2-lime);
	box-shadow: none;
}
body.fx-v2 .fs-btn--ghost,
body.fx-v2 .fs-site .fs-btn--ghost {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--v2-line-2);
}
body.fx-v2 .fs-btn--ghost:hover,
body.fx-v2 .fs-site .fs-btn--ghost:hover {
	background: var(--v2-surface);
	box-shadow: inset 0 0 0 1px var(--v2-ink);
}
body.fx-v2 .fs-btn--onDark,
body.fx-v2 .fs-site .fs-btn--onDark {
	background: var(--v2-lime);
	border-color: var(--v2-lime);
	color: var(--v2-ink);
}
body.fx-v2 .fs-btn--onDark:hover,
body.fx-v2 .fs-site .fs-btn--onDark:hover { background: var(--v2-lime-2); border-color: var(--v2-lime-2); color: var(--v2-ink); }
/* 강조 버튼(페이지당 1곳): 라임 면 + 검정 글자 */
body.fx-v2 .fx-btn-lime {
	background: var(--v2-lime) !important;
	border-color: var(--v2-lime) !important;
	color: var(--v2-ink) !important;
}
body.fx-v2 .fx-btn-lime:hover { background: var(--v2-lime-2) !important; border-color: var(--v2-lime-2) !important; }

/* 포커스: 검정 2px + 라임 바깥 2px — 어느 바탕에서도 보인다 */
body.fx-v2 a:focus-visible,
body.fx-v2 button:focus-visible,
body.fx-v2 input:focus-visible,
body.fx-v2 select:focus-visible,
body.fx-v2 textarea:focus-visible,
body.fx-v2 [tabindex]:focus-visible {
	outline: 2px solid var(--v2-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--v2-lime);
}

/* ── 4. 공통 부품 (fx-) ──────────────────────────────────── */
body.fx-v2 .fx-chip {
	min-height: 28px;
	padding: 0 10px;
	border-radius: 6px;
	background: var(--v2-surface);
	color: var(--v2-ink-2);
	font-size: 13px;
	font-weight: 600;
}
body.fx-v2 .fx-chip--line { background: #fff; border: 1px solid var(--v2-line-2); }
/* 탭: 알약 → 밑줄형(한 종류만) */
body.fx-v2 .fx-tabs {
	gap: 0;
	justify-content: center;   /* 제목이 가운데인 섹션에서 탭만 왼쪽에 붙던 정렬 불일치(대표 지적) 해소 */
	border-bottom: 1px solid var(--v2-line);
	overflow-x: auto;
	scrollbar-width: none;
}
body.fx-v2 .fx-tabs::-webkit-scrollbar { display: none; }
body.fx-v2 .fx-tab {
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--v2-ink-3);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 transparent;
	white-space: nowrap;
}
body.fx-v2 .fx-tab:hover { color: var(--v2-ink); background: none; }
body.fx-v2 .fx-tab[aria-selected="true"] {
	background: none;
	color: var(--v2-ink);
	box-shadow: inset 0 -2px 0 var(--v2-ink);
}
/* 브라우저 프레임: 더 얇고 조용하게 */
body.fx-v2 .fx-browser {
	border-color: var(--v2-line-2);
	border-radius: 12px;
	box-shadow: var(--v2-shadow-2);
}
body.fx-v2 .fx-browser__bar { background: var(--v2-surface); border-bottom-color: var(--v2-line); padding: 8px 12px; }
body.fx-v2 .fx-browser__bar i { width: 9px; height: 9px; background: var(--v2-line-2); }
body.fx-v2 .fx-slider__btn { border-radius: 10px; }
body.fx-v2 .fx-section--soft { background: var(--v2-surface); }
/* 흰 페이지 중간의 검정 섹션은 쓰지 않는다 — 잉크 면은 짙은 회색 면으로 낮춘다 */
body.fx-v2 .fx-section--dark { background: var(--v2-surface); color: var(--v2-ink); }
body.fx-v2 .fx-section--dark .fx-title { color: var(--v2-ink); }
body.fx-v2 .fx-section--dark .fx-sub { color: var(--v2-ink-3); }

/* 대표 피드백(2026-10-04): 작은 라벨(eyebrow)은 하나하나가 AI 티, 회색 섹션 배경은 침침함 → 전 페이지 공통으로 끈다 */
body.fx-v2 .fx-eyebrow,
body.fx-v2 .fs-eyebrow { display: none; }
body.fx-v2 .fx-section--soft { background: var(--v2-bg); }

/* ── 5. 헤더 · 푸터 ──────────────────────────────────────── */
/* backdrop-filter 를 .fs-hd 에 직접 걸면 그 안의 position:fixed 모바일 드로어가 헤더 높이(60px)에 갇혀 메뉴가 안 보인다.
   배경·블러는 ::before 로 분리한다. */
body.fx-v2 .fs-hd::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); }
body.fx-v2 .fs-hd__mark { background: var(--v2-ink); color: var(--v2-lime); border-radius: 8px; }
body.fx-v2 .fs-hd__link:hover,
body.fx-v2 .fs-hd__link[aria-current="page"] { color: var(--v2-ink); }
body.fx-v2 .fs-hd__panel { border: 1px solid var(--v2-line); border-radius: 14px; box-shadow: var(--v2-shadow-2); }
body.fx-v2 .fs-hd__panellink:hover { background: var(--v2-surface); }
body.fx-v2 .fs-ft { background: #151513; }
body.fx-v2 .fs-ft__mark { color: var(--v2-lime); opacity: .08; }

/* ── 6. 에메랄드 하드코딩 덮기(페이지별 CSS 에 남은 초록) ─────── */
body.fx-v2 .fs-hcar__hl { color: var(--v2-lime); }
body.fx-v2 .fx-switch[aria-checked="true"],
body.fx-v2 .fx-switch.is-on { background: var(--v2-ink); }
body.fx-v2 .fx-switch[aria-checked="true"] .fx-switch__knob,
body.fx-v2 .fx-switch.is-on .fx-switch__knob { background: var(--v2-lime); }
body.fx-v2 .fx-demo__fill { background: var(--v2-ink); }
body.fx-v2 .fx-demo__go { background: var(--v2-ink); color: #fff; }

/* ── 7. 상태 칩(마이페이지·현황판 공용) ─────────────────────── */
body.fx-v2 .fx-status {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 26px; padding: 0 10px; border-radius: 6px;
	font-size: 13px; font-weight: 600; background: var(--v2-surface); color: var(--v2-ink-2);
}
body.fx-v2 .fx-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.fx-v2 .fx-status--ok { background: #e7f4ea; color: var(--v2-ok); }
body.fx-v2 .fx-status--warn { background: #fbf0dc; color: var(--v2-warn); }
body.fx-v2 .fx-status--danger { background: #fbe7e5; color: var(--v2-danger); }
body.fx-v2 .fx-status--work { background: var(--v2-lime-soft); color: var(--v2-lime-ink); }