Template:PatchInfo/styles.css

/* ============================================================
   틀:PatchInfo 전용 스타일 (TemplateStyles)
   - 이 파일은  로만 로드됩니다.
   - 콘텐츠 모델은 반드시 '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;  /* 버그 수정 카테고리 */
	--pi-new: #7c4dd6;     /* 신규 배지 (보라색) */
	--pi-del: #4b5563;     /* 제거 배지 (회색) */

	/* --- 카드 외형 --- */
	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;
}

/* --- 항목 카드 (PatchInfo/Item): 섹션 안의 개별 대상 --- */
.patchinfo__item {
	margin: 8px 0;
	padding: 10px 12px;
	background: #fafbfc;
	border: 1px solid #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: #e4e8ee;          /* 중간 회색 톤: 흰·어두운 아이콘 모두 대비 확보 */
	border: 1px solid #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: #9aa3af;
}

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