/* ═══════════════════════════════════════════════════════════
   CASE & BOOK — 전후사진 리스팅 페이지 (케이스북 테마)
   폰트 정책:
     - 본문/한글: Pretendard (var(--cb-sans)) — 가독성 우선
     - 영문 장식(Case&Book, VOL., CASE #N): Playfair Display (var(--cb-display))
     - 한글에는 italic을 쓰지 않음 (한글 italic은 단순 기울임으로 보기 나쁨)
   ═══════════════════════════════════════════════════════════ */

:root {
	--cb-cream: var(--wds-surface, #F7F7F8);
	--cb-paper: var(--wds-bg, #FFFFFF);
	--cb-ink: var(--wds-text, #1A1A1A);
	--cb-accent: var(--wds-primary, #5E1A25);
	--cb-accent-soft: var(--wds-primary-soft, #FBF3F5);
	--cb-line: var(--wds-border, #E4E4E7);
	--cb-gray: var(--wds-text-sub, #5A5A5A);
	--cb-gray-soft: var(--wds-text-muted, #8A8A8A);
	--cb-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
	--cb-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* 전체 페이지 배경 — 공통 크림톤 통일 */
.community_wrap {
	background: var(--dn-cream) !important;
	font-family: var(--cb-sans);
}
.community_wrap * {
	font-family: inherit;
}
/* 영문 장식 폰트만 선택적으로 적용 */
.casebook-hero__chapter,
.casebook-hero__sub-num,
.cb-display {
	font-family: var(--cb-display) !important;
}
.casebook-hero__title {
	font-family: 'Pretendard', Inter, 'Noto Sans KR', -apple-system, sans-serif !important;
}

/* 히어로는 2026revision.css 공통 스타일 사용 — 개별 오버라이드 제거 */

/* ─── 필터 "나와 비슷한 케이스 찾기" ───────────────────── */
.casebook-finder {
	background: var(--cb-paper);
	border: 1px solid var(--cb-line);
	border-radius: var(--wds-r-sm, 8px);
	padding: 28px 32px;
	margin: 0 auto 28px;
	box-shadow: 0 1px 3px rgba(94, 26, 37,0.04);
}
.casebook-finder__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px dashed var(--cb-line);
}
.casebook-finder__label strong {
	font-size: 18px;
	color: var(--cb-ink);
	letter-spacing: -0.01em;
	font-weight: 600;
}
.casebook-finder__label small {
	font-size: 13.5px;
	color: var(--cb-gray);
	font-weight: 400;
	margin-left: auto;
}
.casebook-finder__icon {
	font-size: 18px;
}
.casebook-finder__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px 30px;
}
.casebook-finder__pair {
	display: contents;
}
.casebook-finder__row > .casebook-finder__group {
	grid-column: 1 / -1;
}
.casebook-finder__pair > .casebook-finder__group:last-child {
	flex-wrap: nowrap;
}
.casebook-finder__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.casebook-finder__tag {
	font-size: 13.5px;
	color: var(--cb-gray);
	min-width: 108px;
	padding-right: 10px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: left;
	flex: 0 0 auto;
}
.casebook-finder__group a {
	font-size: 13.5px;
	padding: 8px 18px;
	border: 1px solid var(--cb-line);
	background: var(--cb-paper);
	color: var(--cb-gray);
	border-radius: 22px;
	text-decoration: none;
	transition: all 0.2s;
	letter-spacing: -0.01em;
	font-weight: 500;
}
.casebook-finder__group a:hover {
	border-color: var(--cb-accent-soft);
	color: var(--cb-accent);
}
.casebook-finder__group a.active {
	background: var(--cb-accent);
	color: #fff;
	border-color: var(--cb-accent);
	font-weight: 600;
}
.casebook-finder__result {
	margin-top: 18px;
	padding: 14px 18px;
	background: var(--cb-cream);
	border-left: 3px solid var(--cb-accent);
	font-size: 13.5px;
	color: var(--cb-gray);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.casebook-finder__result strong {
	color: var(--cb-accent);
	font-size: 17px;
	font-weight: 700;
}
.casebook-finder__clear {
	margin-left: auto;
	font-size: 13.5px;
	color: var(--cb-gray);
	text-decoration: none;
	padding: 5px 12px;
	border: 1px solid var(--cb-line);
	border-radius: 3px;
	transition: all 0.2s;
	font-weight: 500;
}
.casebook-finder__clear:hover {
	background: var(--cb-accent);
	color: #fff;
	border-color: var(--cb-accent);
}

@media (max-width: 768px) {
	.casebook-finder { padding: 12px 12px 14px; margin: 18px 0 16px; max-width: 100%; width: 100%; }
	.casebook-finder__label {
		gap: 6px;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.casebook-finder__label strong { font-size: 15px; }
	.casebook-finder__label small { margin-left: 0; width: 100%; font-size: 13.5px; }
	.casebook-finder__icon { font-size: 15px; }
	.casebook-finder__row { display: flex !important; flex-direction: column !important; gap: 10px !important; grid-template-columns: none !important; }
	.casebook-finder__pair { display: flex !important; flex-direction: column !important; gap: 10px !important; }
	.casebook-finder__pair > .casebook-finder__group:last-child { flex-wrap: wrap !important; }
	.casebook-finder__row > .casebook-finder__group { grid-column: auto !important; }
	.casebook-finder__group {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 4px;
		overflow: visible;
		padding-bottom: 0;
	}
	.casebook-finder__tag {
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		font-size: 13.5px;
		padding: 0 0 1px;
		font-weight: 600;
		text-align: left;
		color: var(--cb-ink);
	}
	.casebook-finder__group a {
		padding: 5px 9px;
		font-size: 13.5px;
		flex: 0 0 auto;
		white-space: nowrap;
		letter-spacing: -0.02em;
	}
	.casebook-finder__result {
		margin-top: 10px;
		padding: 10px 12px;
		font-size: 13.5px;
		gap: 8px;
	}
	.casebook-finder__result strong { font-size: 13.5px; }
	.casebook-finder__clear { font-size: 13.5px; padding: 4px 9px; }
}

/* ─── 카테고리 탭 (책 챕터 스타일) ────────────────────── */
#bna_category {display: flex !important;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;}
#bna_category li {list-style: none;
	flex: 0 0 auto !important;
	width: auto !important;
	box-shadow: none !important;}
#bna_category li a {display: inline-block;
	text-decoration: none;
	letter-spacing: -0.01em;
	border-bottom: 2px solid transparent;
	transition: all 0.2s;}
#bna_category li a:hover {border-bottom-color: var(--cb-accent, #5E1A25);}
#bna_category li.check a {border-bottom-color: var(--cb-accent, #5E1A25);}

/* 모바일: 가로 스크롤 + 스냅 (겹침 방지, 모든 카테고리명 온전히 표시) */
@media (max-width: 768px) {
	#bna_category {flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 4px !important;
		max-width: 100%;
		width: 100%;
		border-bottom:1px solid var(--wds-primary, #5E1A25);
		-ms-overflow-style: none;
		scrollbar-width: none;}
	#bna_category::-webkit-scrollbar {display: none;}
	#bna_category li {flex: 0 0 auto !important;
		min-width: auto !important;
		white-space: nowrap;
		text-align: center;
		scroll-snap-align: start;}
	#bna_category li a {display: block !important;
		white-space: nowrap;
		letter-spacing: -0.02em;
		text-align: center;}
	/* 선택된 탭을 중앙으로 스냅하면 UX 더 나음 */
	#bna_category li.check {scroll-snap-align: center;}
	/* 카운트 small 크기 약간 조정 */
	#bna_category li a small {margin-left: 3px !important;}
}
@media (max-width: 380px) {
	#bna_category li a {letter-spacing: -0.03em;}
}

/* .w1280 폭은 wune-ds.css 가 담당한다 (2026-09-02 이관) */
/* ─── 케이스 카드 (책 페이지) ──────────────────────────── */
.bna_thumb_list {
	width: 100%;
	margin: 0 auto;
}
.bna_thumb_list ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px 40px;
	padding: 0 !important;
	margin: 0 auto;
	width: 100%;
	list-style: none;
	justify-content: center;
}
@media (max-width: 768px) {
	.bna_thumb_list ul { grid-template-columns: 1fr; gap: 40px 0; }
}

.casebook-card {
	background: var(--cb-paper);
	border: 1px solid var(--cb-line);
	border-radius: var(--wds-r-sm, 8px);
	box-shadow: 0 2px 8px rgba(94, 26, 37,0.04), 0 1px 2px rgba(94, 26, 37,0.03);
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	-webkit-tap-highlight-color: transparent;
}
.casebook-card *,
.casebook-card a,
.casebook-card button,
.casebook-card li {
	-webkit-tap-highlight-color: transparent;
}
.casebook-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(94, 26, 37,0.1), 0 4px 8px rgba(94, 26, 37,0.06);
}
.casebook-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--cb-accent) 0%, var(--cb-accent-soft) 50%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}

/* ─── 카드 헤더 (케이스 번호 + 제목) ─────────────────── */
.casebook-card__head {
	display: block;
	padding: 20px 26px 20px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--cb-line);
	background: linear-gradient(180deg, var(--cb-paper) 0%, #fffcf7 100%);
}
.casebook-card__brand {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--cb-line);
}
.casebook-card__brand img {
	height: 24px !important;
	width: auto !important;
	max-width: none !important;
	opacity: 0.82;
	display: block !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
}
@media (max-width: 768px) {
	.casebook-card__brand img { height: 20px !important; }
}
.casebook-card__meta-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.casebook-card__no {
	font-size: 15.5px;
	letter-spacing: 0.08em;
	color: var(--cb-accent);
	font-weight: 700;
	text-transform: uppercase;
}
.casebook-card__cat {
	font-size: 13.5px;
	color: var(--cb-gray);
	padding: 4px 11px;
	background: var(--cb-cream);
	border: 1px solid var(--cb-line);
	border-radius: 20px;
	letter-spacing: -0.01em;
	font-weight: 500;
}
.casebook-card__title {
	font-size: 20.5px;
	font-weight: 700;
	color: var(--cb-ink);
	margin: 0 0 10px;
	line-height: 1.35;
	letter-spacing: -0.02em;
}
.casebook-card__patient {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.casebook-card__patient span {
	font-size: 13.5px;
	color: var(--cb-gray);
	letter-spacing: -0.01em;
	font-weight: 500;
}

/* ─── 전후 사진 영역 ─────────────────────────────────── */
.casebook-card .bna-angle { padding: 0 !important; background:var(--wds-surface, #F7F7F8); }
.casebook-card .bna-angle--hidden { display: none; }
.casebook-card .bna-angle .cont_list {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.casebook-card .bna-angle .cont_list ul {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.casebook-card .bna-angle .cont_list li,
.casebook-card .bna-angle .cont_list li.img_wrap,
.casebook-card .bna-angle .cont_list li.txt_wrap {
	list-style: none !important;
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden !important;
	background:var(--wds-surface, #F7F7F8) !important;
	border-radius: 0 !important;
}
.casebook-card .bna-angle .cont_list li > a,
.casebook-card .bna-angle .cont_list li > div:not(.txt_wrap_txt) {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	inset: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.casebook-card .bna-angle .cont_list li a > div,
.casebook-card .bna-angle .cont_list li > div:not(.txt_wrap_txt) > div {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
}
.casebook-card .bna-angle .cont_list li img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
}
.casebook-card .bna-angle li::before {
	content: 'BEFORE';
	position: absolute;
	top: 12px; left: 12px;
	z-index: 3;
	font-family: 'Pretendard', Inter, 'Noto Sans KR', -apple-system, sans-serif;
	font-size: 13.5px;
	letter-spacing: 0.2em;
	color: #fff;
	background: rgba(44,26,14,0.78);
	padding: 4px 10px;
	border-radius: 2px;
	font-weight: 600;
}
.casebook-card .bna-angle li:nth-child(2)::before {
	content: 'AFTER';
	background: rgba(94, 26, 37,0.9);
}
.casebook-card .bna-angle .cont_list li.txt_wrap {
	background: linear-gradient(135deg, #3a261a 0%, #2c1a0e 100%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.casebook-card .bna-angle li .txt_wrap_txt {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 16px !important;
	font-size: 13.5px;
	color: #fff;
	font-weight: 600;
	line-height: 1.6;
	z-index: 4;
	background: transparent !important;
	text-shadow: 0 1px 4px rgba(0,0,0,0.4);
	opacity: 1 !important;
}
.casebook-card .bna-angle li .txt_wrap_txt .cont_title_info {
	font-size: 13.5px;
	color: rgba(255,255,255,0.75);
	margin-bottom: 8px;
	font-weight: 400;
	letter-spacing: 0.02em;
	opacity: 1 !important;
}
/* txt_wrap 안의 숨겨진 img 가림 */
.casebook-card .bna-angle li.txt_wrap > div:last-child {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	opacity: 0.12 !important;
	filter: blur(12px) !important;
}
.casebook-card .bna-angle li.txt_wrap > div:last-child img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.casebook-card .bna-angle-btns {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 4px 18px 14px;
	-webkit-tap-highlight-color: transparent;
}
.casebook-card .bna-angle-btns button {
	font-size: 13.5px;
	padding: 6px 16px;
	border: 1px solid var(--cb-line);
	background: var(--cb-paper);
	color: var(--cb-gray);
	border-radius: 3px;
	cursor: pointer;
	letter-spacing: -0.01em;
	transition: all 0.2s;
	font-weight: 500;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.casebook-card .bna-angle-btns button:hover {
	border-color: var(--cb-accent-soft);
	color: var(--cb-accent);
}
.casebook-card .bna-angle-btns button.active {
	background: var(--cb-accent);
	color: #fff;
	border-color: var(--cb-accent);
	font-weight: 600;
}

/* ─── 카드 풋터 (사양표) ─────────────────────────────── */
.casebook-card__foot {
	display: block;
	padding: 20px 26px 24px;
	text-decoration: none;
	color: inherit;
	border-top: 1px dashed var(--cb-line);
	background: linear-gradient(180deg, #fffcf7 0%, var(--cb-paper) 100%);
}
.casebook-card__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
	margin: 0 0 16px;
}
.casebook-card__specs > div {
	display: flex;
	align-items: baseline;
	font-size: 13.5px;
	gap: 10px;
}
.casebook-card__specs dt {
	color: var(--cb-gray-soft);
	font-size: 13.5px;
	letter-spacing: -0.01em;
	min-width: 54px;
	white-space: nowrap;
	font-weight: 500;
}
.casebook-card__specs dd {
	color: var(--cb-ink);
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.02em;
	word-break: keep-all;
	font-size: 13.5px;
}
.casebook-card__more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 13.5px;
	color: var(--cb-accent);
	letter-spacing: -0.01em;
	padding-top: 12px;
	border-top: 1px solid var(--cb-line);
	font-weight: 600;
}
.casebook-card__more span {
	margin-left: 6px;
	transition: transform 0.2s;
}
.casebook-card:hover .casebook-card__more span {
	transform: translateX(4px);
}

/* ─── 볼륨 변화 : 에디토리얼 타이포 디자인 ──────────
   박스 제거, Playfair 세리프로 컵 사이즈 표현
   라벨은 작은 트래킹 라벨, After 는 액센트 언더라인 강조 */
.casebook-card__volume {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	white-space: nowrap;
	padding: 14px 0 12px;
	margin: 0 0 10px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cb-line);
	border-radius: 0;
	line-height: 1;
}
/* 컵수 → 화살표 → 컵수 균일 정렬용 inline group */
.casebook-card__volume-trio {
	display: inline-flex;
	align-items: center;
	gap: 8px;          /* before-arrow-after 사이 정확히 8px */
	flex: 0 0 auto;
}
.casebook-card__volume-label {
	font-size: 13.5px;
	color: var(--cb-gray-soft);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
	padding: 0;
	margin: 0;
	border: 0;
	flex-shrink: 0;
	min-width: 54px;
	align-self: center;
	line-height: 1.3;
}
/* 화살표를 기준으로 before는 우측, after는 좌측 정렬 →
   글자 폭(C, D, Full D 등)과 무관하게 화살표↔글자 간격 일정 */
.casebook-card__volume-before,
.casebook-card__volume-after {
	display: inline-flex;
	align-items: center;
	font-family: var(--cb-sans);
	font-size: 17px;
	line-height: 1;
	height: 20px;
	min-width: 30px;              /* 너무 짧은 컨텐츠도 최소 폭 유지 */
	padding: 0;
	background: transparent;
	border: 0;
	letter-spacing: 0.01em;
	font-style: normal;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}
.casebook-card__volume-before {
	color: var(--cb-gray-soft);
	font-weight: 500;
	justify-content: flex-end;    /* 화살표 쪽으로 붙임 */
	text-align: right;
}
.casebook-card__volume-after {
	justify-content: flex-start;  /* 화살표 쪽으로 붙임 */
	text-align: left;
}
.casebook-card__volume-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cb-sans);
	font-style: normal;
	color: var(--cb-accent-soft);
	font-weight: 500;
	font-size: 15.5px;
	line-height: 1;
	height: 20px;
	width: 16px;
	margin: 0;                    /* 부모 .volume-trio gap만 사용 → 균일 */
	letter-spacing: 0;
	vertical-align: middle;
}
.casebook-card__volume-after {
	color: var(--cb-accent);
	font-weight: 700;
}
/* before/after 화살표 기준 정렬로 폭 절약 → 난이도까지 한 줄에 우측 정렬 */
/* 난이도 라벨 + 별 (볼륨변화 줄 우측) */
.casebook-card__diff {
	margin-left: auto;
	padding-left: 10px;
	padding-right: 2px;       /* overflow:hidden 우측 컷 방지 안전 여백 */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	line-height: 1;
}
.casebook-card__diff-label {
	font-size: 13.5px;
	color: var(--cb-gray-soft);
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
	line-height: 1.3;
}
.casebook-card__diff-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--cb-accent);
	line-height: 0;
}
.casebook-card__diff-star { display: block; }

@media (max-width: 768px) {
	.casebook-card__volume { padding: 12px 0 10px; gap: 6px; }
	.casebook-card__volume-label { font-size: 13.5px; min-width: 50px; }
	.casebook-card__volume-before,
	.casebook-card__volume-after { font-size: 15px; min-width: 26px; }
	.casebook-card__volume-arrow { font-size: 13.5px; }
	.casebook-card__volume-trio { gap: 6px; }
	.casebook-card__diff {
		gap: 5px;
		padding-left: 6px;
		padding-right: 0;
	}
	.casebook-card__diff-label { font-size: 13.5px; }
	.casebook-card__diff-stars { gap: 1.5px; }
	.casebook-card__diff-star { width: 12px; height: 12px; }
}

/* ─── 페이지네이션 ──────────────────────────────────────
   전역 .number_box 규칙(2026revision.css) 으로 통일.
   리얼리뷰 페이지 디자인과 동일하게 적용되므로 이 페이지 전용 오버라이드 없음. */

/* ─── 결과 없음 ──────────────────────────────────────── */
.board_list_none_li {
	grid-column: 1 / -1;
	text-align: center;
	padding: 70px 20px;
	color: var(--cb-gray);
	background: var(--cb-paper);
	border: 1px dashed var(--cb-line);
	border-radius: var(--wds-r-sm, 8px);
	font-size: 15px;
	font-weight: 500;
}

/* ─── 모바일 폭 확장 (2026-04-22) ────────────────────────
   기본 .cont 의 좌우 패딩(16~20px)이 모바일에서 케이스 카드를 답답하게
   보이게 함. 케이스북 영역만 좌우 패딩을 8px로 줄이고 카드 헤더 패딩도 축소. */
@media (max-width: 768px) {
	.beforeafter02 .cont,
	.beforeafter02 > .cont {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.bna_thumb_list,
	.bna_thumb_list ul {
		max-width: 100% !important;
		width: 100% !important;
	}
	.casebook-card__head { padding: 16px 14px 14px !important; }
	.casebook-card__foot { padding: 16px 14px 18px !important; }   /* head L/R 와 동일하게 → 볼륨변화·수술방법·경과 전부 좌측 정렬 */
	.casebook-card__brand { margin-bottom: 10px; padding-bottom: 10px; }
	.casebook-card__meta-top { margin-bottom: 8px; }
}
@media (max-width: 480px) {
	.beforeafter02 .cont,
	.beforeafter02 > .cont {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
	.casebook-card__head { padding: 14px 12px 12px !important; }
	.casebook-card__foot { padding: 14px 12px 16px !important; }   /* head 와 동일 */
}

/* ── 2026-09-02 : 디자인시스템을 쓰지 않는 언어 사이트용 기본값 ──────────
   🚨 이 파일은 KR 뿐 아니라 jp·en·cn·tw·th 가 함께 쓴다.
      KR 을 토큰으로 옮기면서 이 파일의 색을 전부 var(--wds-*) 로 바꿨는데,
      그 토큰은 wune-ds.css 에만 있고 언어 사이트는 그 파일을 부르지 않는다.
      → 색이 통째로 무효가 됐고, 칩은 좌우 여백까지 사라져 글자가 맞붙었다.
      실측(/jp/ 375px) : 칩 padding 이 `7px 0` 이라 알약 배경이 글자에 딱 붙었다.
   🥇 토큰에는 전부 폴백을 넣었고, 아래는 DS 가 없을 때만 적용한다. */
body:not(.wds) #bna_category li > a {
	padding: 8px 14px !important;
	font-size: 13.5px;
	line-height: 1.2;
	border-radius: 999px;
}
body:not(.wds) #bna_category { gap: 8px; }
/* 🚨 li 마다 margin-right:10px !important 가 걸려 있어 칩 간격이 6·16px 로 섞였다.
      간격은 gap 하나로만 준다 (tenets 목록에서 이미 한 번 한 실수다).
   🚨 언어별 CSS(en-typography·cn-mobile)가 casebook.css 뒤에 실려 a 패딩을 덮는다.
      body:not(.wds) 로 KR 을 제외했으니 !important 로 못박는다. */
body:not(.wds) #bna_category li { margin: 0 !important; }
@media (max-width: 768px) {
	body:not(.wds) #bna_category li > a { padding: 8px 12px !important; }
	body:not(.wds) #bna_category { gap: 6px !important; }
}

/* ── 2026-09-02 : DS 를 쓰는 사이트의 필터 칩 ─────────────────────
   🚨 이 파일은 wune-ds.css 보다 뒤에 실린다. DS 쪽에 같은 규칙을 넣었더니
      이 파일과 언어별 CSS 에 밀려 칩 카운트 `(58)` 이 흰 배경에 흰 글자로 남았다(대비 1.00).
      순서가 보장되는 이 파일에서 마무리한다.
   🚨 마크업이 class 가 아니라 id(#bna_category) 라 DS 의 `.bna_category a` 규칙은 애초에 안 걸린다. */
body.wds #bna_category li {
	background: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.wds #bna_category li > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 var(--wds-4, 16px) !important;
	font-size: var(--wds-fs-label, 13.5px) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--wds-text, #1A1A1A) !important;
	background: var(--wds-bg, #FFFFFF) !important;
	border: 1px solid var(--wds-border, #E4E4E7) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}
body.wds #bna_category li.check > a {
	color: var(--wds-text-invert, #FFFFFF) !important;
	background: var(--wds-primary, #5E1A25) !important;
	border-color: var(--wds-primary, #5E1A25) !important;
}
body.wds #bna_category li a small {
	color: inherit !important;
	font-size: 0.85em !important;
	font-weight: 400 !important;
}

/* ── 2026-09-02 : 필터 칩이 서로 겹쳐 보이던 진짜 원인 ──────────────
   🚨 간격 문제가 아니었다(gap 6px 정상). `<a>` 가 `width:100%` + content-box 라
      좌우 패딩 16px 이 **상자 밖으로** 나갔다.
      실측 — li 80px 인데 a 는 112px, 좌우로 각각 16px 씩 삐져나와
      알약 배경이 옆 칩을 26px 덮었다(원장 지적 「버튼 겹쳐 있어」).
   🥇 패딩을 준 요소에는 border-box 를 함께 준다. */
body.wds #bna_category li > a {
	box-sizing: border-box !important;
	width: auto !important;
}

/* ── 「나와 비슷한 케이스 찾기」 칩도 V1 로 (원장 지시) ──────────────
   실측 — 한국어는 40h/13.5px/pill 로 이미 맞는데
          언어 사이트는 12.5px · border-radius 3px 로 옛 모양이었다. */
body.wds .casebook-finder :is(button, a) {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 var(--wds-4, 16px) !important;
	font-size: var(--wds-fs-label, 13.5px) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--wds-text, #1A1A1A) !important;
	background: var(--wds-bg, #FFFFFF) !important;
	border: 1px solid var(--wds-border, #E4E4E7) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}
body.wds .casebook-finder :is(button, a):is(.is-active, .active, [aria-pressed="true"]) {
	color: var(--wds-text-invert, #FFFFFF) !important;
	background: var(--wds-primary, #5E1A25) !important;
	border-color: var(--wds-primary, #5E1A25) !important;
}

/* 🚨 겹침의 진짜 원인 : DS 칩 규칙이 `margin: 0 calc(var(--wds-4) * -1)` = **0 -16px** 을 준다.
      실측 — a 의 marginLeft/Right 가 -16px 이라 알약이 li 밖으로 좌우 16px 씩 나가
      옆 칩을 26px 덮었다. 음수 마진은 「부모 패딩 상쇄」용인데 이 칩에는 부모 패딩이 없다. */
body.wds #bna_category li > a {
	margin: 0 !important;
}
/* 케이스 찾기 칩 — 일본어 PC 가 아직 12.5px·radius 3px 이었다. 특이도를 한 단 올린다. */
html body.wds .casebook-finder :is(button, a) {
	font-size: var(--wds-fs-label, 13.5px) !important;
	border-radius: 999px !important;
	min-height: 40px !important;
}