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

/* ============================================================
   틀:PatchInfo 전용 스타일 (TemplateStyles)
   - 이 파일은 <templatestyles src="..."> 로만 로드됩니다.
   - 콘텐츠 모델은 반드시 'sanitized-css' 여야 합니다.
   - 클래스명은 BEM 규칙: 블록=patchinfo, 요소=__, 변형=--
   ============================================================ */

.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;  /* 버그 수정 카테고리 */

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

/* --- 카테고리 섹션 공통 --- */
.patchinfo__sec {
	padding: 8px 18px 14px;
	border-bottom: 1px solid #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; }  /* 항목명 위 여백 */

/* --- 섹션 본문: 불릿 제거, 히어로/항목명 강조 --- */
.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: #9aa3af;
}

/* --- 변경 유형 배지 (상향/하향/조정) --- */
.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); } /* 조정 */