/* ==========================================================================
   MODULE: components/pill (.wzs-pill)
   짧은 배지/라벨. 매거진 본문 및 페이지 어디서든 사용.

   크기 두 단계
     .wzs-pill                    본문/메타용 기본 크기 (글 카테고리, "예시" 표시 등)
     .wzs-section-head .wzs-pill  섹션 눈썹(eyebrow)용 큰 크기 — 자동 적용

   색
     기본            회색 (중립)
     --amber         흰 바탕 + 주황 테두리/글씨. 예전엔 연한 갈색 바탕(--wzs-amber-soft)에
                     짙은 갈색 글씨였는데 탁한 색으로 보인다는 지적이 있어 흰색+주황으로 바꿨다.
                     다크 섹션(체크리스트) 위에서도 이 조합 그대로 쓴다.
     --blue          연파랑 바탕 + 파랑 글씨 (단계 번호·그룹 라벨 등 기능성 라벨)
   ========================================================================== */

.wzs-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	padding: 6px 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wzs-bg-alt);
	color: var(--wzs-ink-soft);
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
	line-height: 1.5;
}

.wzs-pill--amber {
	background: var(--wzs-white);
	border-color: #edc98f;
	color: var(--wzs-amber-ink);
}

.wzs-pill--blue {
	background: var(--wzs-blue-soft);
	color: var(--wzs-blue);
}

/* 섹션 눈썹 기본값. 흰 바탕 + 잉크 테두리·글씨.
   앰버(--amber)를 안 쓰는 이유: 짙은 주황이 탁해 보인다는 지적이 반복됐다.
   파랑도 후보였지만 이 사이트에서 파랑은 링크 색이라(variables.css 색 사용 규칙),
   누를 수 없는 라벨에 쓰면 클릭을 유도하게 된다. 눈썹은 "여기서 새 이야기가 시작된다"는
   표시일 뿐이므로 조용한 중립색이 맞다. */
.wzs-pill--ink {
	background: var(--wzs-white);
	border-color: var(--wzs-ink);
	color: var(--wzs-ink);
}

/* 다크 배경용. 흰 알약을 어두운 사진 위에 놓으면 너무 튀어서 본문보다
   먼저 읽힌다. 테두리와 글씨만 흰색으로 두고 속은 비운다. */
.wzs-pill--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--wzs-white);
}

/* --- 다크 섹션에서는 --amber 눈썹을 자동으로 --ghost 로 ---
   흰 알약을 어두운 사진 위에 놓으면 눈썹이 제목보다 먼저 읽힌다.
   마크업을 고치지 않고 배경에 따라 알아서 바뀌게 해 둔다.
   목록은 components/cta.css 의 "어두운 배경 아웃라인 버튼" 목록과 같은 섹션들이다 —
   다크 섹션을 새로 만들면 두 곳에 같이 추가할 것. --amber 와 --ink 둘 다 걸어 둔다.
   (밝은 배경인 .wzs-answers 는 여기 없으므로 원래대로 흰 바탕 + 주황 글씨를 유지한다) */
.wzs-hero-hook .wzs-pill--amber,
.wzs-hero-hook .wzs-pill--ink,
.wzs-sell .wzs-pill--amber,
.wzs-sell .wzs-pill--ink,
.wzs-reality .wzs-pill--amber,
.wzs-reality .wzs-pill--ink,
.wzs-checklist .wzs-pill--amber,
.wzs-checklist .wzs-pill--ink,
.wzs-home-contact .wzs-pill--amber,
.wzs-home-contact .wzs-pill--ink,
.wzs-article-cta .wzs-pill--amber,
.wzs-article-cta .wzs-pill--ink,
.wzs-sec .wzs-pill--amber,
.wzs-sec .wzs-pill--ink,
.wzs-onsite .wzs-pill--amber,
.wzs-onsite .wzs-pill--ink,
.wzs-intl-contact .wzs-pill--amber,
.wzs-intl-contact .wzs-pill--ink {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--wzs-white);
}

/* --- 섹션 눈썹용 큰 크기 ---
   기본 크기 그대로 섹션 제목 위에 놓으면 제목에 비해 너무 작아 초라해 보인다.
   .wzs-section-head 안에서는 자동으로 커지므로 마크업에 따로 클래스를 붙일 필요 없다.
   (제목과의 간격은 components/section-head.css 에서 잡는다) */
.wzs-section-head .wzs-pill,
.wzs-article-cta .wzs-pill,
.wzs-pill--lg {
	padding: 11px 26px;
	font-size: var(--wzs-fs-base);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* --- 링크 알약 (.wzs-pill--link) ---
   눌러서 이동하는 알약. 지금은 글 상단의 카테고리 배지 하나가 쓴다 —
   예전에는 <span> 이라 눌러도 아무 일이 없었고, 글에서 같은 분류의 다른 글로
   넘어갈 길이 하나도 없었다. 모양은 기본 알약 그대로 두고 동작만 얹는다.

   선택자를 .wzs-article 로 한 겹 감싸는 이유(중요):
   base/typography.css 의 `.wzs-article a`(0,2,0)가 글 안의 링크를 파란 밑줄로 칠한다.
   클래스 하나짜리(0,1,0)로는 그걸 못 이겨, 배지가 파란 글씨에 밑줄 그어진 채로 남는다.
   여기 선택자의 명시도를 낮추지 말 것 — 바이라인(.wzs-article-byline)에서 겪은 것과 같은 문제다.
   a.wzs-pill--link 를 함께 두는 건 글 밖(카드·목록 등)에서 쓸 때를 위한 것이다. */
.wzs-article .wzs-pill--link,
a.wzs-pill--link {
	color: var(--wzs-ink-soft);
	text-decoration: none;
	transition:
		background-color var(--wzs-duration-fast) var(--wzs-ease),
		color var(--wzs-duration-fast) var(--wzs-ease);
}

/* 색을 반전시킨다. 배지 자리가 좁아 밑줄이나 테두리 변화로는 눌리는 것인지 잘 안 보인다. */
.wzs-article .wzs-pill--link:hover,
.wzs-article .wzs-pill--link:focus-visible,
a.wzs-pill--link:hover,
a.wzs-pill--link:focus-visible {
	background: var(--wzs-ink);
	color: var(--wzs-white);
}