@charset "utf-8";

/* ============================================
   레벨 배지 시스템 안내 (/bbs/content.php?co_id=level_guide)
   ---------------------------------------------------------
   원래 level_guide.php 안에 인라인 <style> 로 박혀 있던 규칙을 파일로 분리했다.
   본문(content.skin.php)은 <main id="nt_body"> 안에 렌더되므로
   #nt_body 스코프인 totolist/tokens.css 의 var(--*) 가 .lvg 까지 그대로 도달한다.
   ============================================ */

/* 디자인 토큰 브릿지 — 값의 SSOT 는 skin/board/totolist/tokens.css. 여기서 하드코딩 금지.
   별칭을 .lvg(=#nt_body 내부)에 두는 이유: tokens.css 가 #nt_body 스코프라
   :root 에 두면 선언 지점에서 치환돼 전부 무효가 된다. */
.lvg {
	--lvg-card:   var(--card);
	--lvg-border: var(--line);
	--lvg-text:   var(--ink);
	--lvg-text2:  var(--body);
	--lvg-text3:  var(--muted);
	/* 아래 3개는 팔레트 색이 아니라 배경 위에 얹는 알파 오버레이/틴트라 대응 토큰이 없다.
	   --lvg-highlight 의 200,152,72 는 T5 Gold(#C89848) — Lv.100 행 강조용. */
	--lvg-header-bg: rgba(0,0,0,0.02);
	--lvg-stripe:    rgba(0,0,0,0.015);
	--lvg-highlight: rgba(200,152,72,0.06);

	max-width: 720px;
	margin: 0 auto;
	/* 위아래 여백은 넣지 않는다 — 상위 .nt-container 가 이미 py-3/py-sm-4 를 준다.
	   여기서 20px/40px 를 더하면 다른 게시판(#nw_wrap·#tag_wrap 등)보다 페이지가 떠 보인다. */
	padding: 0 16px;
	font-family: var(--font-ui);
	-webkit-font-smoothing: antialiased;
}

/* Header — 도입 카드 상단 영역. 아래 '배지 구성' 본문과는 1px 선으로 나눈다. */
.lvg-head {
	text-align: center;
	padding: 26px 24px 22px;
	border-bottom: 1px solid var(--lvg-border);
}
.lvg-head .lvg-sub { font-size: 11px; color: var(--lvg-text3); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; font-family: var(--font-num); }
.lvg-head h2 { font-size: 22px; font-weight: 800; color: var(--lvg-text); margin: 0 0 8px; line-height: 1.3; }
.lvg-head p { font-size: 14px; color: var(--lvg-text2); margin: 0; line-height: 1.6; }

/* Card */
.lvg-card {
	background: var(--lvg-card);
	border-radius: var(--r-16);
	border: 1px solid var(--lvg-border);
	margin-bottom: 20px;
	overflow: hidden;
}
.lvg-card:last-child { margin-bottom: 0; } /* 마지막 카드 아래는 컨테이너 패딩만 */
.lvg-card-pad { padding: 20px 24px; }
.lvg-card-pad--tight { padding-top: 4px; }
.lvg-card-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--lvg-text);
	margin: 0 0 10px;
}
.lvg-card-title--spaced { margin-bottom: 12px; }
.lvg-card-body {
	font-size: 15px;
	color: var(--lvg-text2);
	line-height: 1.8;
}
.lvg-card-body b { color: var(--lvg-text); }

/* Tier Table */
.lvg-table-title { padding: 16px 20px 12px; }
.lvg-table-title .lvg-card-title { margin: 0; }
.lvg-tbl-head {
	display: grid;
	grid-template-columns: 70px 1fr 70px 1.4fr;
	padding: 8px 20px;
	background: var(--lvg-header-bg);
	font-size: 12px;
	font-weight: 600;
	color: var(--lvg-text3);
	letter-spacing: 0.5px;
}
.lvg-tbl-row {
	display: grid;
	grid-template-columns: 70px 1fr 70px 1.4fr;
	align-items: center;
	padding: 8px 20px;
	border-top: 1px solid var(--lvg-border);
}
.lvg-tbl-row.has-effect { padding: 10px 20px; }
.lvg-tbl-row.stripe { background: var(--lvg-stripe); }
.lvg-tbl-row.lv100-row { background: var(--lvg-highlight); padding: 12px 20px; }
.lvg-tbl-preview { display: flex; justify-content: center; }
.lvg-tbl-tier { display: flex; align-items: center; gap: 8px; }
.lvg-tbl-tier-name { font-size: 15px; font-weight: 600; color: var(--lvg-text); }
.lvg-tbl-tier-name--strong { font-weight: 700; }
/* 레벨 범위는 숫자 전용 폰트 (DESIGN_SYSTEM §2) */
.lvg-tbl-range { font-size: 15px; color: var(--lvg-text2); font-family: var(--font-num); }
.lvg-tbl-range--strong { font-weight: 600; }
.lvg-tbl-effect { font-size: 14px; color: var(--lvg-text2); line-height: 1.5; }
.lvg-tbl-effect.muted { color: var(--lvg-text3); }
.lvg-tbl-effect.colored { font-weight: 500; }
.lvg-tbl-effect.colored--strong { font-weight: 600; }
/* Role badge list (역할 배지) */
.lvg-fx-list { display: flex; flex-direction: column; gap: 12px; }
.lvg-fx-item {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 10px 14px;
	border-radius: var(--r-12);
	background: var(--lvg-stripe);
}
.lvg-fx-badge { flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-width: 60px; }
.lvg-fx-info { flex: 1; }
.lvg-fx-desc { font-size: 14px; color: var(--lvg-text2); line-height: 1.55; }

/* FAQ */
.lvg-faq-item { margin-bottom: 12px; }
.lvg-faq-item:last-child { margin-bottom: 0; }
.lvg-faq-q { font-size: 15px; font-weight: 600; color: var(--lvg-text); margin-bottom: 4px; }
.lvg-faq-a { font-size: 14px; color: var(--lvg-text2); line-height: 1.6; padding-left: 2px; }

/* Footer — FAQ 카드 안쪽 하단. 헤더(.lvg-head)와 같은 구분선 규약. */
.lvg-footer {
	text-align: center;
	padding: 14px 24px;
	border-top: 1px solid var(--lvg-border);
	font-size: 13px;
	color: var(--lvg-text3);
}

/* Mobile */
@media (max-width: 575px) {
	.lvg { padding: 0 12px; }
	.lvg-head { padding: 20px 18px 18px; }
	.lvg-footer { padding: 12px 18px; }
	.lvg-head h2 { font-size: 20px; }
	.lvg-card-pad { padding: 16px 18px; }
	.lvg-tbl-head, .lvg-tbl-row {
		grid-template-columns: 54px 1fr 50px 1.3fr;
		padding-left: 12px;
		padding-right: 12px;
	}
	.lvg-tbl-tier-name { font-size: 14px; }
	.lvg-tbl-effect { font-size: 13px; }
	.lvg-fx-item { gap: 10px; padding: 8px 10px; }
	.lvg-fx-badge { min-width: 50px; }
}

/* ============================================
   Dark Mode — 별도 팔레트 토큰 도입 전까지 리터럴 유지 (DESIGN_SYSTEM §1)
   ============================================ */
html.dark-mode .lvg {
	--lvg-card: #25262b;
	--lvg-border: #2c2d32;
	--lvg-text: #e5e7eb;
	--lvg-text2: #9ca3af;
	--lvg-text3: #6b7280;
	--lvg-header-bg: rgba(255,255,255,0.04);
	--lvg-stripe: rgba(255,255,255,0.015);
	--lvg-highlight: rgba(200,152,72,0.04);
}