Template:PatchInfo/styles.css: 두 판 사이의 차이

/* ============================================================
   틀:PatchInfo 전용 스타일 (TemplateStyles)
   - 이 파일은 <templatestyles src="..."> 로만 로드됩니다.
   - 콘텐츠 모델은 반드시 'sanitized-css' 여야 합니다.
   - 클래스명은 BEM 규칙: 블록=patchinfo, 요소=__, 변형=--
   - 배경·텍스트·테두리는 MediaWiki 표준 토큰(var(--color-*))을
     참조하므로 다크 모드에서 자동으로 대응됩니다. 두 번째 인자는
     토큰 미지원 환경을 위한 라이트 모드 폴백값입니다.
   ============================================================ */

.patchinfo {
	/* --- 카테고리·배지 고유색: 색을 바꾸려면 여기만 수정하세요 --- */
	--pi-buff: #2f6fdb;    /* 상향 배지 */
	--pi-nerf: #d24545;    /* 하향 배지 */
	--pi-adjust: #c5921b;  /* 조정 배지 */
	--pi-system: #1f9d57;  /* 체계 카테고리 */
	--pi-hero: #7d5bbe;    /* 히어로 카테고리 */
	--pi-codex: #169b8a;   /* 코덱스 카테고리 */
	--pi-other: #6b7280;   /* 기타 카테고리 */
	--pi-bugfix: #4a7a85;  /* 버그 수정 카테고리 */
	--pi-new: #7c4dd6;     /* 신규 배지 (보라색) */
	--pi-del: #4b5563;     /* 제거 배지 (회색) */

	/* --- 카드 외형 --- */
	max-width: 880px;
	margin: 1em 0;
	border: 1px solid var(--border-color-base, #e1e5ea);
	border-radius: 12px;
	background: var(--color-surface-1, #ffffff);
	overflow: hidden;       /* 둥근 모서리 밖으로 배경이 새지 않도록 */
	font-size: 0.95em;
	line-height: 1.65;
	color: var(--color-base, #1f2430);
}

/* --- 카테고리 섹션 공통 --- */
.patchinfo__sec {
	padding: 8px 18px 14px;
	border-bottom: 1px solid var(--border-color-subtle, #f0f2f5);
	border-left: 3px solid transparent;  /* 변형 클래스에서 색 지정 */
}
.patchinfo__sec:last-child { border-bottom: none; }

/* 카테고리별 좌측 강조선: 새 카테고리 추가 시 여기에 한 줄 추가 */
.patchinfo__sec--system { border-left-color: var(--pi-system); }
.patchinfo__sec--hero   { border-left-color: var(--pi-hero); }
.patchinfo__sec--codex  { border-left-color: var(--pi-codex); }
.patchinfo__sec--other  { border-left-color: var(--pi-other); }
.patchinfo__sec--bugfix { border-left-color: var(--pi-bugfix); }

/* --- 카테고리 제목 (알약형 라벨) --- */
.patchinfo__sec-title {
	display: inline-block;
	margin: 10px 0 8px;
	padding: 2px 12px;
	font-weight: 700;
	font-size: 0.9em;
	color: #fff;
	border-radius: 999px;   /* 완전한 알약 형태 */
}
/* 카테고리별 제목 배경: 위 border-left와 짝을 이룸 */
.patchinfo__sec--system .patchinfo__sec-title { background: var(--pi-system); }
.patchinfo__sec--hero   .patchinfo__sec-title { background: var(--pi-hero); }
.patchinfo__sec--codex  .patchinfo__sec-title { background: var(--pi-codex); }
.patchinfo__sec--other  .patchinfo__sec-title { background: var(--pi-other); }
.patchinfo__sec--bugfix .patchinfo__sec-title { background: var(--pi-bugfix); }

/* --- 섹션 본문: 불릿 제거, 히어로/항목명 강조 --- */
.patchinfo__sec-body ul { margin: 4px 0; padding-left: 0; list-style: none; }
.patchinfo__sec-body li { margin: 4px 0; padding-left: 2px; }
.patchinfo__sec-body b,
.patchinfo__sec-body strong { display: inline-block; margin-top: 6px; }  /* 항목명 위 여백 */

/* --- 2단계 항목: 스킬에 종속된 세부 변경 --- */
.patchinfo__sec-body li li {
	margin-left: 1.1em;       /* 한 단계 안쪽으로 들여쓰기 */
	font-weight: normal;      /* 세부 변경은 강조하지 않음 */
}
.patchinfo__sec-body li li::before {
	content: "– ";            /* 종속 관계를 나타내는 짧은 대시 */
	color: var(--color-subtle, #9aa3af);
}

/* --- 항목 카드 (PatchInfo/Item): 섹션 안의 개별 대상 --- */
.patchinfo__item {
	margin: 8px 0;
	padding: 10px 12px;
	background: var(--color-surface-2, #fafbfc);
	border: 1px solid var(--border-color-subtle, #eceff3);
	border-radius: 8px;
}
.patchinfo__item:first-child { margin-top: 4px; }

/* 카드 머리: 아이콘 + 이름 + 배지 한 줄 정렬 */
.patchinfo__item-head {
	display: flex;
	align-items: center;
	gap: 6px;
}
.patchinfo__item-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-surface-3, #e4e8ee);     /* 중간 톤: 흰·어두운 아이콘 모두 대비 확보 */
	border: 1px solid var(--border-color-base, #c4ccd6);  /* 배경과 무관하게 아이콘 영역 경계 */
	border-radius: 6px;
	flex-shrink: 0;               /* 이름이 길어도 아이콘이 찌그러지지 않도록 */
}
.patchinfo__item-name { font-weight: 700; font-size: 1.05em; }
.patchinfo__item-tags { display: inline-flex; gap: 4px; margin-left: 2px; }

/* 카드 본문: 머리와 살짝 간격, 세부 변경 목록 */
.patchinfo__item-body { margin-top: 6px; }
.patchinfo__item-body ul { margin: 2px 0; padding-left: 0; list-style: none; }
.patchinfo__item-body li { margin: 3px 0; }
.patchinfo__item-body li li {
	margin-left: 1.1em;
	font-weight: normal;
}
.patchinfo__item-body li li::before {
	content: "– ";
	color: var(--color-subtle, #9aa3af);
}

/* --- 개발자 코멘트: 변경 사실과 구분되는 강조 영역 --- */
.patchinfo__item-note {
	margin-top: 8px;
	padding: 8px 11px;
	background: var(--color-surface-3, #eef2fb);     /* 카드보다 진한 톤으로 또렷하게 */
	border: 1px solid var(--border-color-base, #d4ddf0);
	border-left: 4px solid var(--color-progressive, #5b7fc4);  /* 좌측 강조선 */
	border-radius: 6px;
	font-size: 0.92em;
	color: var(--color-base, #41506b);
	line-height: 1.55;
}
.patchinfo__item-note::before {
	content: "조정 목표";        /* 영역 제목 자동 표기 */
	display: block;
	margin-bottom: 3px;
	font-size: 0.82em;
	font-weight: 700;
	color: var(--color-progressive, #5b7fc4);
	letter-spacing: 0.02em;
}

/* --- 변경 유형 배지 공통 --- */
.pi-tag {
	display: inline-block;
	min-width: 3em;         /* 글자 수 달라도 폭 일정하게 */
	margin-right: 6px;
	padding: 1px 8px;
	font-size: 0.78em;
	font-weight: 700;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	vertical-align: middle;
}
.pi-up   { background: var(--pi-buff); }   /* 상향 */
.pi-down { background: var(--pi-nerf); }   /* 하향 */
.pi-mid  { background: var(--pi-adjust); } /* 조정 */
.pi-new  { background: var(--pi-new); }    /* 신규 */
.pi-del  { background: var(--pi-del); }    /* 제거 */

/* ============================================================
   다크 모드 보정
   - 배경·텍스트·테두리는 위에서 표준 토큰을 쓰므로 자동 대응됩니다.
   - 카테고리·배지 고유색만, 어두운 배경에서 너무 쨍하지 않도록
     채도를 살짝 낮춘 값으로 재정의합니다.
   - Vector 2022(클래스 기반)와 OS 설정(미디어 쿼리) 양쪽 대응.
   ============================================================ */
html.skin-theme-clientpref-night .patchinfo {
	--pi-buff: #4a86e8;
	--pi-nerf: #e06a6a;
	--pi-adjust: #d6a93c;
	--pi-system: #3bb878;
	--pi-hero: #9c7ed6;
	--pi-codex: #2bb3a0;
	--pi-other: #8b929e;
	--pi-bugfix: #6a99a4;
	--pi-new: #9b72e0;
	--pi-del: #6b7280;
}
@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .patchinfo {
		--pi-buff: #4a86e8;
		--pi-nerf: #e06a6a;
		--pi-adjust: #d6a93c;
		--pi-system: #3bb878;
		--pi-hero: #9c7ed6;
		--pi-codex: #2bb3a0;
		--pi-other: #8b929e;
		--pi-bugfix: #6a99a4;
		--pi-new: #9b72e0;
		--pi-del: #6b7280;
	}
}