/* CrossDesign 전후사진 갤러리 - Frontend (크로스디자인 톤)
 * 크로스디자인그룹 (CrossDesign Group) https://crossdesign.co.kr/
 * 포인트 컬러(--cdba-accent)는 설정값으로 :root 에 주입됨.
 */

.cdba-app {
	--cdba-accent2: #8fb6e6;
	--cdba-ink: #242424;
	--cdba-muted: #565656;
	--cdba-line: #e4edf8;
	--cdba-soft: #eef5fd;
	--cdba-bg: #ffffff;
	--cdba-radius: 12px;
	color: var(--cdba-ink);
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px 0 32px;
	box-sizing: border-box;
}
.cdba-app *,
.cdba-app *::before,
.cdba-app *::after { box-sizing: border-box; }

/* ===== 필터 패널 ===== */
.cdba-filters {
	background: #ebf2fa94;
    border: 1px solid #9eb8df47;
    border-radius: 18px;
    padding: 40px 40px 37px 40px;
    margin-bottom: 35px;
    box-shadow: none;
	position: relative;
}
.cdba-find-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px dashed #d7e4f3;
}
.cdba-find-title strong { 
	font-size: 16px; 
	font-weight: 700; 
	color: #242424; 
	letter-spacing: -0.8px;
}
.cdba-find-title em { color: var(--cdba-muted); font-style: normal; font-size: 13px; }
.cdba-find-ico { font-size: 15px; }

.cdba-search { position: relative; margin: 4px 0 14px; }
.cdba-search-input {
	width: 100%; height: 46px; padding: 0 16px 0 42px;
	font-size: 15px; color: var(--cdba-ink);
	background: #fff; border: 1.5px solid #dce8f6; border-radius: 12px;
	outline: none; box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
}
.cdba-search-input::placeholder { color: #9aacc4; }
.cdba-search-input:focus { border-color: var(--cdba-accent, #6f9bd6); box-shadow: 0 0 0 4px rgba(111,155,214,.18); }
.cdba-search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border: 2px solid #9aacc4; border-radius: 50%; pointer-events: none; }
.cdba-search-ic::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 2px; height: 7px; background: #9aacc4; transform: rotate(-45deg); border-radius: 2px; }

.cdba-filter-row {
	display: grid;
	grid-template-columns: 84px 1fr;
	align-items: start;
	gap: 10px;
	padding: 7px 0;
}
.cdba-filter-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: -0.4px;
	color: #5b86c9;
	padding-top: 9px;
	text-transform: uppercase;
}
@media (min-width: 561px) {
	.cdba-filter-label { font-size: 15px; font-weight: 700; letter-spacing: -0.5px; padding-top: 6px; }
}
.cdba-sub-row {
	margin-top: 4px;
}
.cdba-sub-row .cdba-chips {
	padding: 9px 11px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid #dde8f5;
	border-left: 3px solid var(--cdba-accent, #6f9bd6);
	border-radius: 8px;
}
.cdba-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cdba-chip {
	padding: 6px 13px;
	font-size: 13px;
	font-weight: 500;
	color: #5f6f88;
	background: #ffffff;
	border: 1px solid #dde8f5;
	border-radius: 9px;
	cursor: pointer;
	line-height: 1.4;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cdba-chip:hover {
	background: #eaf2fc;
	border-color: var(--cdba-accent, #6f9bd6);
	color: var(--cdba-accent, #6f9bd6);
}
.cdba-chip.is-active {
	background: var(--cdba-accent2, #8fb6e6);
	border-color: var(--cdba-accent2, #8fb6e6);
	color: #fff;
	font-weight: 600;
}
.cdba-sub-chip { border-radius: 20px; }
.cdba-reset {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1.5px solid var(--cdba-accent, #6f9bd6);
	color: var(--cdba-accent, #6f9bd6);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
	position: absolute;
    bottom: 40px;
    right: 35px;
}
.cdba-reset::before { content: "\21ba"; font-size: 14px; }
.cdba-reset:hover { background: #16263a; border-color: #16263a; color: #fff; }




/* ===== 결과 헤더 ===== */
.cdba-meta-line { margin: 0 0 14px; }
.cdba-count { font-size: 13px; color: var(--cdba-muted); }
.cdba-count { font-size: 14px; }
.cdba-count strong { color: #5b86c9; font-weight: 700; font-size: 19px; }

/* ===== 그리드 ===== */
.cdba-grid {
	display: grid;
	grid-template-columns: repeat(var(--cdba-cols, 3), 1fr);
	gap: 14px;
}
@media (max-width: 900px) { .cdba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cdba-grid { grid-template-columns: repeat(var(--cdba-cols-m, 1), 1fr); } }

/* ===== 카드 ===== */
.cdba-card {
	border: 1px solid var(--cdba-line);
	border-radius: var(--cdba-radius);
	overflow: hidden;
	background: var(--cdba-bg);
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba(120, 150, 200, 0.07);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cdba-card:hover {
	border-color: var(--cdba-accent, #6f9bd6);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(111, 155, 214, 0.22);
}
.cdba-card-head { padding: 17px 20px; }
.cdba-case-no {
	display: inline-block;
    font-size: 11px;
    letter-spacing: .06em;
    font-weight: 600;
    color: #88a1c7;
    letter-spacing: -0.1px;
}
.cdba-cat {
	display: inline-block;
	margin-left: 8px;
	font-size: 11px;
	background: #eaf2fc;
	color: #5b86c9;
	padding: 2px 9px;
	border-radius: 999px;
}
.cdba-card-title { font-size: 15px; font-weight: 700; margin: 8px 0 6px; line-height: 1.4; word-break: keep-all; }
.cdba-card-tags { display: flex; gap: 12px; font-size: 12px; color: var(--cdba-muted); }
.cdba-gender-m i { color: #5889d4; }
.cdba-gender-f i { color: #e68f8f; }

/* ===== 미디어 / 전후 나란히 ===== */
.cdba-media { position: relative; background: #ffffff; cursor: zoom-in; }
.cdba-slides { position: relative; }
.cdba-slide { display: none; }
.cdba-slide.is-active { display: block; }

.cdba-ba { display: grid; grid-template-columns: 1fr 1fr; }
.cdba-ba-cell {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #ffffff;
}
.cdba-ba-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
	user-select: none;
}
.cdba-ba-img.is-blur {
	filter: blur(var(--cdba-blur, 6px));
	transform: scale(var(--cdba-blur-scale, 1)) translateZ(0);
	transform-origin: center center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

.cdba-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 3px 10px;
	border-radius: 6px;
	color: #fff;
	z-index: 3;
}
.cdba-tag-before { background: rgba(13,17,23,.6); }
.cdba-tag-after { background: #8fb6e6; }

.cdba-cell-lock {
	position: absolute;
	inset: 0;
	background: var(--cdba-ov-blur, rgba(15,28,46,.18));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-align: center;
	padding: 10px;
	z-index: 4;
}
.cdba-cell-lock .cdba-lock-ico { font-size: 20px; }
.cdba-cell-lock p { margin: 0; font-size: 12px; color: #fff; line-height: 1.45; }

.cdba-zoom {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 30px;
	height: 28px;
	border-radius: 8px;
	background: #ffffff;
	color: #16263a;
	border: 1px solid rgb(255 255 255 / 18%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	box-sizing: border-box;
	z-index: 3;
	pointer-events: none;
}

/* 각도 탭 */
.cdba-angle-tabs {
	display: flex;
	gap: 6px;
	padding: 8px;
	background: #f1f1f1;
	justify-content: center;
}
.cdba-angle {
	border: 1px solid rgb(0 0 0 / 11%);
	background: transparent;
	color: rgb(0 0 0 / 85%);
	font-size: 12px;
	padding: 4px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
}
.cdba-angle.is-active { background: #fff; color: var(--cdba-ink); border-color: #fff; }

.cdba-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	border: 1.5px solid var(--cdba-accent2, #8fb6e6);
	color: #fff;
	transition: all .15s ease;
}
.cdba-btn-primary {
	background: var(--cdba-accent, #6f9bd6);
	border-color: var(--cdba-accent, #6f9bd6);
}
.cdba-btn-primary:hover { background: #5f8ac9; border-color: #5f8ac9; }

/* 카드 푸터 */
.cdba-card-foot .cdba-more { margin-top: auto; }
.cdba-card-foot { padding: 13px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cdba-change { font-size: 13px; font-weight: 600; color: var(--cdba-ink); }
.cdba-change span {
	display: inline-block;
	margin-right: 6px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(180deg, var(--cdba-accent2, #83ace3), var(--cdba-accent, #6f9bd6));
	padding: 1px 8px;
	border-radius: 999px;
}
.cdba-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.cdba-mchip {
	font-size: 11px;
	background: #eaf2fc;
	color: #5b86c9;
	padding: 3px 10px;
	border-radius: 999px;
}
.cdba-summary { font-size: 12px; color: var(--cdba-muted); margin: 2px 0 0; line-height: 1.6; }
.cdba-more {
	align-self: flex-end;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--cdba-accent, #6f9bd6);
	text-decoration: none;
	letter-spacing: -0.7px;
}
.cdba-more:hover { text-decoration: underline; }

.cdba-noimg, .cdba-empty {
	padding: 44px 20px;
	text-align: center;
	color: #9aa7b4;
	font-size: 14px;
}
.cdba-empty {
	border: 1px dashed var(--cdba-line);
	border-radius: var(--cdba-radius);
}

/* 페이지네이션 */
.cdba-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.cdba-page-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--cdba-line);
	background: #fff;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--cdba-ink);
	transition: all .15s ease;
}
.cdba-page-btn:hover:not(:disabled):not(.is-active) { border-color: var(--cdba-accent, #6f9bd6); color: var(--cdba-accent, #6f9bd6); }
.cdba-page-btn.is-active { background: var(--cdba-accent, #6f9bd6); border-color: var(--cdba-accent, #6f9bd6); color: #fff; cursor: default; }
.cdba-page-btn:disabled { opacity: .4; cursor: default; }
.cdba-dots { color: #9aa7b4; padding: 0 2px; }

.cdba-credit { text-align: center; margin-top: 24px; font-size: 12px; color: #9aa7b4; }
.cdba-credit a { color: #9aa7b4; }

.cdba-results.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }

/* ===== 상세 모달(팝업) ===== */
.cdba-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15,28,46,.62);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 99999;
}
.cdba-modal-overlay[hidden] { display: none; }
.cdba-modal {
	--cdba-accent2: #8fb6e6;
	--cdba-ink: #16263a;
	--cdba-muted: #5b6b72;
	--cdba-line: #e4edf8;
	--cdba-soft: #eef5fd;
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 640px;
	max-height: 94vh;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba(15,28,46,.45);
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	color: var(--cdba-ink, #16263a);
}
.cdba-modal-close {
	position: absolute;
	top: 10px; right: 12px;
	width: 38px; height: 38px;
	min-width: 38px;
	box-sizing: border-box;
	padding: 0;
	flex: none;
	border: none;
	background: rgba(15,28,46,.5);
	color: #fff;
	font-size: 24px; line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	z-index: 6;
}
.cdba-modal-close:hover { background: rgba(15,28,46,.75); }
.cdba-modal-head { padding: 18px 22px 12px; }
.cdba-modal-cat {
	display: inline-block;
	font-size: 11px; letter-spacing: .04em;
	padding: 3px 11px;
	border-radius: 999px;
	background: #eaf2fc;
	color: #5b86c9;
	margin-bottom: 6px;
}
.cdba-modal-cat:empty { display: none; }
.cdba-modal-no { font-size: 11px; font-weight: 700; color: #5b86c9; margin-left: 6px; letter-spacing: .05em; }
.cdba-modal-title { margin: 4px 0 0; font-size: 19px; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.cdba-modal-ba { position: relative; background: #ffffff; }
.cdba-modal-ba .cdba-ba-cell { aspect-ratio: 3 / 4; height: auto; }
.cdba-modal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px; height: 42px;
	min-width: 42px;
	box-sizing: border-box;
	padding: 0;
	flex: none;
	border: none;
	border-radius: 50%;
	background: rgba(15,28,46,.5);
	color: #fff;
	font-size: 22px; line-height: 1;
	cursor: pointer;
	z-index: 5;
}
.cdba-modal-nav:hover { background: rgba(15,28,46,.75); }
.cdba-modal-prev { left: 10px; }
.cdba-modal-next { right: 10px; }
.cdba-modal-angles {
	display: flex;
	gap: 6px;
	justify-content: center;
	padding: 10px;
	background: #f1f1f1;
}
.cdba-modal-foot { padding: 18px 22px 0; }
.cdba-modal-foot > *:last-child { margin-bottom: 18px; }
.cdba-modal-change { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.cdba-modal-change span {
	display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 600; color: #fff;
	background: linear-gradient(180deg, var(--cdba-accent2, #83ace3), var(--cdba-accent, #6f9bd6)); padding: 1px 8px; border-radius: 999px;
}
.cdba-modal-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.cdba-modal-tag { font-size: 12px; color: #5b86c9; background: #eef5fd; padding: 4px 10px; border-radius: 999px; }
.cdba-modal-summary { font-size: 13px; color: var(--cdba-muted, #5b6b72); line-height: 1.7; margin: 0; }

@media (max-width: 560px) {
	.cdba-modal-ba .cdba-ba-cell { height: auto; aspect-ratio: 3 / 4; }
	.cdba-modal-ba .cdba-ba-img { object-fit: cover; }
	.cdba-modal-title { font-size: 17px; }
	.cdba-modal-summary { display: none; }
	.cdba-modal-tag { font-size: 10px; }
	.cdba-modal-head { padding: 12px 18px 6px; }
	.cdba-modal-foot { padding: 10px 22px 0; }
	.cdba-modal-foot .cdba-info { margin-top: 5px; }
}

/* ===== 단일 케이스 상세 ===== */
.cdba-single { position: relative; }
body.single-cdba_case .entry-title,
body.single-cdba_case .entry-header h1,
body.single-cdba_case h1.entry-title,
body.single-cdba_case .post-title,
body.single-cdba_case .page-title,
body.single-cdba_case article > h1 { text-align: center; }
@media (min-width: 561px) {
	.cdba-single { max-width: 900px; margin-left: auto; margin-right: auto; }
}
.cdba-single-grid { display: flex; flex-direction: column; gap: 18px; }
.cdba-single-pair { margin: 0; text-align: center; }
.cdba-single-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cdba-single-cell {
	position: relative;
	background: #ffffff;
	border-radius: var(--cdba-radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
}
.cdba-single-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdba-single-cell img.is-blur {
	filter: blur(var(--cdba-blur, 6px));
	transform: scale(var(--cdba-blur-scale, 1)) translateZ(0);
	transform-origin: center center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}
.cdba-single-pair figcaption { display: inline-block; margin-top: 12px; padding: 6px 16px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--cdba-ink); background: var(--cdba-soft); border: 1px solid var(--cdba-line); border-radius: 999px; }
.cdba-single-lock {
	position: relative;
	margin-top: 16px;
	background: var(--cdba-soft);
	border: 1px solid var(--cdba-line);
	border-left: 3px solid var(--cdba-accent, #6f9bd6);
	border-radius: 0 10px 10px 0;
	padding: 18px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.cdba-single-lock p { margin: 0; font-size: 14px; color: var(--cdba-ink); }
.cdba-single-change { margin: 18px 0 10px; font-size: 15px; }
.cdba-single-change strong {
	display: inline-block; margin-right: 6px; font-size: 12px; color: #fff;
	background: linear-gradient(180deg, var(--cdba-accent2, #83ace3), var(--cdba-accent, #6f9bd6)); padding: 1px 9px; border-radius: 999px;
}
.cdba-info-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	font-size: 14px;
}
.cdba-info-table th, .cdba-info-table td {
	border: 1px solid var(--cdba-line);
	padding: 10px 14px;
	text-align: left;
}
.cdba-info-table th { background: var(--cdba-soft); width: 140px; color: #5b86c9; font-weight: 600; }
.cdba-disclaimer { font-size: 12px; color: #9aa7b4; margin-top: 10px; }
@media (max-width: 560px) {
	.cdba-single-row { grid-template-columns: 1fr; }
	.cdba-single-grid { max-width: 80%; margin-left: auto; margin-right: auto; }
}


/* 카드 하단 세부수술+설명 한 줄 */
.cdba-subline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cdba-subline .cdba-mchip { flex: none; }
.cdba-subline-txt { font-size: 12px; color: var(--cdba-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.6; }


/* 수술 정보 요약 */
.cdba-info { display: grid; gap: 5px; margin: 6px 0 2px; padding-top: 10px; border-top: 1px dashed var(--cdba-line); }
.cdba-info-row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; font-size: 12px; align-items: baseline; }
.cdba-info-k { color: var(--cdba-muted); }
.cdba-info-v { color: var(--cdba-ink); font-weight: 500; word-break: keep-all; }
.cdba-info-stars { color: #f0a830; letter-spacing: 1px; font-weight: 400; }
.cdba-modal-foot .cdba-info { margin-top: 10px; }


/* 로그인 전 가림 — 어둡게(연하게 보임) 옵션 */
.cdba-cell-lock.is-dark {
	background: var(--cdba-ov-dark, rgb(83 83 83 / 72%));
}

/* ===== PC(561px+) 폰트 +2px — '케이스 찾기' 헤더와 '총 N개의 케이스' 제외 ===== */
@media (min-width: 561px) {
	.cdba-find-title strong { font-size: 24px; }
	.cdba-find-ico { font-size: 20px; }
	.cdba-case-no { font-size: 15px; }
	.cdba-cat { font-size: 13px; }
	.cdba-card-title { font-size: 22px; }
	.cdba-card-tags { font-size: 14px; }
	.cdba-cell-lock p { font-size: 14px; }
	.cdba-btn { font-size: 15px; }
	.cdba-change { font-size: 15px; }
	.cdba-change span { font-size: 13px; }
	.cdba-mchip { font-size: 13px; }
	.cdba-summary { font-size: 14px; }
	.cdba-subline-txt { font-size: 14px; }
	.cdba-more { font-size: 15px; }
	.cdba-noimg, .cdba-empty { font-size: 16px; }
	.cdba-page-btn { font-size: 16px; }
	.cdba-credit { font-size: 14px; }
	.cdba-info-row { font-size: 14px; }
	.cdba-modal-cat { font-size: 13px; }
	.cdba-modal-no { font-size: 13px; }
	.cdba-modal-title { font-size: 21px; }
	.cdba-modal-tag { font-size: 14px; }
	.cdba-modal-summary { font-size: 15px; }
	.cdba-modal-change { font-size: 16px; }
}


/* 이미지 없는 각도 자리표시 */
.cdba-ba-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: #ffffff; }
.cdba-ba-ph { color: #9aacc4; font-size: 13px; letter-spacing: .02em; }

/* 모바일: 필터 라벨 아래로 버튼 100% 폭 스택 */
@media (max-width: 560px) {
	.cdba-meta-line { margin: 30px 0 14px; }
	.cdba-search { margin: 4px 0 7px; }
	.cdba-filters {padding: 25px 25px 30px 25px;}
	.cdba-filter-row { grid-template-columns: 1fr; gap: 0; }
	.cdba-filter-label { padding-top: 0; font-size: 12px; margin-bottom: 5px; }
	.cdba-chip { font-size: 12px; padding: 4px 8px; }
	.cdba-reset { font-size: 12px; position: relative; left: 0; bottom: 0;}
	.cdba-search-input { font-size: 13px; height: 42px; line-height: 42px; }
	.cdba-search-ic { top: 50%; transform: translateY(-50%); }
	.cdba-card-head { padding-top: 14px; }
	.cdba-card-foot { padding: 7px 16px 14px; gap: 4px; }
	.cdba-info { margin: 3px 0 1px; padding-top: 10px; gap: 3px; }
	.cdba-summary { margin: 1px 0 0; }
	.cdba-more { margin-top: 2px; }
	.cdba-mchip { font-size: 10px; }
	.cdba-subline-txt { font-size: 10px; }
	.cdba-page-btn { min-width: 31px; height: 31px; font-size: 12px; }
}

/* ===================================================================
   테마 충돌 방지 (Theme Conflict Armor) — 크로스디자인그룹
   위젯(.cdba-app)과 팝업(.cdba-modal-overlay, body 직속) 양쪽에 적용.
   외부 테마가 내부 요소를 덮어쓰지 못하도록 디자인 값을 고정한다.
   https://crossdesign.co.kr/
   =================================================================== */

/* 1) 루트: 폰트/줄간격 고정 (팝업은 body 직속이라 별도 지정) */
.cdba-app,
.cdba-modal-overlay {
	line-height: 1.5 !important;
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* 2) 폼/버튼/이미지: 테마 상속·기본 스타일 차단 */
.cdba-app button, .cdba-app input, .cdba-app select, .cdba-app textarea,
.cdba-modal-overlay button, .cdba-modal-overlay input, .cdba-modal-overlay select, .cdba-modal-overlay textarea {
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.cdba-app img, .cdba-modal-overlay img { margin: 0 !important; max-width: 100% !important; }

/* 3) 제목 (테마 h1~h6 색/굵기 차단) */
.cdba-app h1, .cdba-app h2, .cdba-app h3, .cdba-app h4, .cdba-app h5, .cdba-app h6,
.cdba-modal-overlay h1, .cdba-modal-overlay h2, .cdba-modal-overlay h3,
.cdba-modal-overlay h4, .cdba-modal-overlay h5, .cdba-modal-overlay h6 {
	color: #242424 !important;
	font-weight: 700 !important;
}
.cdba-app .cdba-card-title { 
	line-height: 1.4 !important;
    margin-top: 0px;
    word-break: keep-all !important;
    display: block;
    letter-spacing: -1px !important;
    padding: 8px 0 9px 0;
}
.cdba-modal-overlay .cdba-modal-title { line-height: 1.35 !important; margin: 4px 0 0 !important; word-break: keep-all !important; }

/* 4) 검색창 (위젯 전용) */
.cdba-app .cdba-search-input {
	height: 46px !important;
	padding: 0 16px 0 42px !important;
	font-size: 15px !important;
	color: var(--cdba-ink, #16263a) !important;
	background: #fff !important;
	border: 1.5px solid #dce8f6 !important;
	border-radius: 12px !important;
}
.cdba-app .cdba-search-input:focus {
	border-color: var(--cdba-accent, #6f9bd6) !important;
	box-shadow: 0 0 0 4px rgba(111,155,214,.18) !important;
}
@media (max-width: 560px) {
	.cdba-app .cdba-search-input { height: 42px !important; font-size: 13px !important; }
}

/* 5) 칩 / 버튼 라운드 복원 */
.cdba-app .cdba-chip { border-radius: 9px !important; }
.cdba-app .cdba-sub-chip { border-radius: 20px !important; }
.cdba-app .cdba-reset { border-radius: 999px !important; }
.cdba-app .cdba-angle, .cdba-modal-overlay .cdba-angle { border-radius: 999px !important; }
.cdba-app .cdba-mchip, .cdba-modal-overlay .cdba-mchip,
.cdba-modal-overlay .cdba-modal-cat {
	border-radius: 999px !important;
	background: #eaf2fc !important;
	color: #5b86c9 !important;
}

/* 6) 팝업 닫기/이동 버튼 (원형 유지) */
.cdba-modal-overlay .cdba-modal-close, .cdba-modal-overlay .cdba-modal-nav {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	text-align: center !important;
	border: none !important;
	border-radius: 50% !important;
	padding: 0 !important;
	background: rgba(15,28,46,.5) !important;
	color: #fff !important;
}
.cdba-modal-overlay .cdba-modal-close { width: 38px !important; height: 38px !important; font-size: 24px !important; }
.cdba-modal-overlay .cdba-modal-nav { width: 42px !important; height: 42px !important; font-size: 22px !important; }
.cdba-modal-overlay .cdba-modal-close:hover, .cdba-modal-overlay .cdba-modal-nav:hover { background: rgba(15,28,46,.75) !important; }

/* 7) 이미지가 셀을 꽉 채우도록 (테마 height:auto 차단) */
.cdba-app .cdba-ba-img, .cdba-modal-overlay .cdba-ba-img,
.cdba-app .cdba-single-cell img, .cdba-modal-overlay .cdba-single-cell img { height: 100% !important; object-fit: cover !important; }

/* 8) BEFORE/AFTER 태그 줄간격 (부풀음 방지) */
.cdba-app .cdba-tag, .cdba-modal-overlay .cdba-tag { line-height: 1.4 !important; }

/* 9) 이모지 아이콘 컬러 렌더링 고정 (테마 폰트의 단색 글리프 방지) */
.cdba-app .cdba-find-ico, .cdba-app .cdba-lock-ico,
.cdba-modal-overlay .cdba-lock-ico {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
}

/* 10) 상세 페이지 제목 (테마 H1 색/굵기/크기 덮어쓰기) */
body.single-cdba_case .entry-title,
body.single-cdba_case h1.entry-title,
body.single-cdba_case .entry-header h1,
body.single-cdba_case article > h1 {
	color: var(--cdba-ink, #16263a) !important;
	font-weight: 700 !important;
	font-size: 32px !important;
	line-height: 1.3 !important;
	text-align: center !important;
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
}
@media (max-width: 560px) {
	body.single-cdba_case .entry-title,
	body.single-cdba_case h1.entry-title { font-size: 24px !important; }
}

/* 11) 사람 아이콘(👤)은 컬러 이모지가 아닌 단색으로 (기준 사이트와 동일) */
.cdba-app .cdba-card-tags > span, .cdba-modal-overlay .cdba-card-tags > span {
	font-variant-emoji: text;
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI Symbol", sans-serif !important;
}

/* 12) 상세 페이지 간격 (테마의 p 여백 리셋 방어) */
.cdba-app .cdba-single-change { margin: 18px 0 10px !important; font-size: 15px !important; }
.cdba-app .cdba-info-table { margin-top: 30px !important; }
.cdba-app .cdba-disclaimer { margin-top: 10px !important; }

/* 닫기버튼 × 세로 정렬 미세조정 */
.cdba-modal-overlay .cdba-modal-close { line-height: 1.2 !important; }

/* 13) 연령대 사람 아이콘 (인라인 SVG, 워드프레스 이모지 변환 무관) */
.cdba-app .cdba-age-ico, .cdba-modal-overlay .cdba-age-ico {
	width: 13px !important; height: 13px !important;
	vertical-align: -2px !important; margin-right: 3px !important;
	display: inline-block !important; max-width: none !important;
}

/* 14) 상세 변화 줄 하단 패딩 제거 */
.cdba-app .cdba-single-change { padding-bottom: 0 !important; }

/* 15) 테마 독립 - 상속형 타이포 속성 전역 초기화 (FontAwesome/SVG 아이콘 제외) */
.cdba-app *:not(i):not([class*="fa-"]):not(svg):not(svg *),
.cdba-modal-overlay *:not(i):not([class*="fa-"]):not(svg):not(svg *) {
	word-spacing: normal !important;
	text-shadow: none !important;
	text-indent: 0 !important;
}
.cdba-app a, .cdba-modal-overlay a { text-decoration: none; }
.cdba-app .cdba-info-table, .cdba-app .cdba-info-table th, .cdba-app .cdba-info-table td {
	border-color: var(--cdba-line, #e4edf8) !important;
	background-image: none !important;
}

/* 16) 이미지 폭도 100% 강제 (테마 img{width:auto} 차단 - 세로 이미지 빈공간 방지) */
.cdba-app .cdba-ba-img, .cdba-modal-overlay .cdba-ba-img,
.cdba-app .cdba-single-cell img, .cdba-modal-overlay .cdba-single-cell img {
	width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* 17) 돋보기 아이콘 인라인 SVG (이모지 대체, 환경 무관 동일) */
.cdba-app .cdba-find-ico svg, .cdba-modal-overlay .cdba-find-ico svg {
	width: 18px !important; height: 18px !important; vertical-align: -3px !important; display: inline-block !important; flex: none !important;
}

/* 18) 검색창 돋보기 아이콘 + placeholder 테마 독립 고정 */
.cdba-app .cdba-search { position: relative !important; }
.cdba-app .cdba-search-ic {
	position: absolute !important; left: 16px !important; top: 50% !important;
	transform: translateY(-50%) !important;
	width: 15px !important; height: 15px !important;
	border: 2px solid #9aacc4 !important; border-radius: 50% !important;
	background: transparent !important; box-sizing: border-box !important;
	margin: 0 !important; padding: 0 !important; pointer-events: none !important;
}
.cdba-app .cdba-search-ic::after {
	content: "" !important; position: absolute !important;
	right: -4px !important; bottom: -4px !important;
	width: 2px !important; height: 7px !important; background: #9aacc4 !important;
	transform: rotate(-45deg) !important; border-radius: 2px !important;
}
.cdba-app .cdba-search-input::placeholder { color: #9aacc4 !important; opacity: 1 !important; }

/* 19) 검색창 종합 고정 (아이콘 SVG + 입력 모든 상태) */
.cdba-app .cdba-search { position: relative !important; }
.cdba-app .cdba-search .cdba-search-ic { position:absolute !important; left:14px !important; top:50% !important; transform:translateY(-50%) !important; width:16px !important; height:16px !important; border:0 !important; background:transparent !important; border-radius:0 !important; margin:0 !important; padding:0 !important; pointer-events:none !important; box-shadow:none !important; z-index:3 !important; }
.cdba-app .cdba-search .cdba-search-ic::after, .cdba-app .cdba-search .cdba-search-ic::before { content:none !important; display:none !important; }
.cdba-app .cdba-search input.cdba-search-input { -webkit-appearance:none !important; appearance:none !important; box-sizing:border-box !important; width:100% !important; height:46px !important; margin:0 !important; padding:0 16px 0 42px !important; font-size:15px !important; line-height:normal !important; font-family:inherit !important; color:var(--cdba-ink,#16263a) !important; background:#fff !important; background-image:none !important; border:1.5px solid #dce8f6 !important; border-radius:12px !important; box-shadow:none !important; outline:none !important; transition:border-color .15s ease, box-shadow .15s ease !important; }
.cdba-app .cdba-search input.cdba-search-input:focus, .cdba-app .cdba-search input.cdba-search-input:focus-visible { border-color:var(--cdba-accent,#6f9bd6) !important; box-shadow:0 0 0 4px rgba(111,155,214,.18) !important; outline:none !important; background:#fff !important; }
.cdba-app .cdba-search input.cdba-search-input::placeholder { color:#9aacc4 !important; opacity:1 !important; }
@media (max-width:560px) { .cdba-app .cdba-search input.cdba-search-input { height:42px !important; font-size:13px !important; } }

/* 20) 팝업 닫기/이동 버튼 아이콘(SVG) 중앙·고정크기 */
.cdba-modal-overlay .cdba-modal-ico { display:block !important; pointer-events:none !important; }

/* 21) 검색 돋보기 아이콘 - 원래 CSS 방식(15px 원, hospitalweb과 동일) + z-index */
.cdba-app .cdba-search .cdba-search-ic { position:absolute !important; left:16px !important; top:50% !important; transform:translateY(-50%) !important; width:15px !important; height:15px !important; border:2px solid #9aacc4 !important; border-radius:50% !important; background:transparent !important; box-sizing:border-box !important; margin:0 !important; padding:0 !important; pointer-events:none !important; z-index:3 !important; box-shadow:none !important; }
.cdba-app .cdba-search .cdba-search-ic::after { content:"" !important; display:block !important; position:absolute !important; right:-4px !important; bottom:-4px !important; width:2px !important; height:7px !important; background:#9aacc4 !important; transform:rotate(-45deg) !important; border-radius:2px !important; border:0 !important; }


/*260710 상세내 페이지 조정*/
.main-content .cdba-app .cdba-info-table { margin-bottom: 0 !important; }
.main-content .cdba-app .cdba-case-info-table { margin-top: 0 !important; border-top: 0 !important; }
.main-content .cdba-app .cdba-info-table td { background: #fff !important; }
.main-content .cdba-app .cdba-disclaimer { 
	font-size: 15px !important;
    letter-spacing: -0.5px;
    color: #6d6d6d !important;
    font-weight: 300 !important;
}

/*260710 상세내 페이지 조정*/
/* 가로형 사진 여백 모드 */
.cdba-app .cdba-wide .cdba-ba-img,
.cdba-modal-overlay .cdba-modal-ba.cdba-wide .cdba-ba-img,
.cdba-app.cdba-wide .cdba-single-cell img {
	object-fit: contain !important;
	background: #dce0e5;
}
.cdba-app .cdba-wide .cdba-ba-cell,
.cdba-modal-overlay .cdba-modal-ba.cdba-wide .cdba-ba-cell,
.cdba-app.cdba-wide .cdba-single-cell {
	background: #dce0e5 !important;
}

/* 상세페이지 본문 글 - 그리드 정렬 + 여백 + 밝기조정*/
.cdba-app.cdba-single .cdba-single-cell.cdba-cell-dark img { filter: brightness(.4); }

.cdba-app.cdba-single .cdba-single-content {
	margin-top: 24px;
	margin-bottom: 40px;
	line-height: 1.7;
}

/* 로그인 오버레이 - 라인 자물쇠 + Login 텍스트 */
.cdba-lock-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; }
.cdba-cell-lock .cdba-lock-ico, .cdba-single-lock .cdba-lock-ico { width: 23px; height: 23px; color: #fff; opacity: .95; }
.cdba-lock-label {
	display: inline-block;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 2px 9px;
	background: rgba(255,255,255,.18);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 999px;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: background .15s ease;
}
.cdba-lock-link:hover .cdba-lock-ico { opacity: 1; }
.cdba-lock-link:hover .cdba-lock-label { background: rgba(255,255,255,.3); border-color: #fff; }

/* 가로형(풀형) - BEFORE/AFTER 세로 1열, 전체 높이는 기본형과 동일 */
.cdba-app .cdba-wide-full .cdba-ba,
.cdba-modal-overlay .cdba-modal-ba.cdba-wide-full .cdba-ba {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: 1fr 1fr !important;
	aspect-ratio: 3 / 2 !important;
}
.cdba-app .cdba-wide-full .cdba-ba-cell,
.cdba-modal-overlay .cdba-modal-ba.cdba-wide-full .cdba-ba-cell {
	aspect-ratio: auto !important;
	height: 100% !important;
	min-height: 0 !important;
}
.cdba-app .cdba-wide-full .cdba-ba-img,
.cdba-modal-overlay .cdba-modal-ba.cdba-wide-full .cdba-ba-img {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover !important;
}
.cdba-app.cdba-wide-full .cdba-single-row {
	grid-template-columns: 1fr !important;
}

/* 가로형(풀형) 상세페이지 - 원본 비율 그대로 (안 잘림) */
.cdba-app.cdba-wide-full .cdba-single-cell {
	aspect-ratio: auto !important;
	height: auto !important;
}
.cdba-app.cdba-wide-full .cdba-single-cell img {
	height: auto !important;
	width: 100% !important;
	object-fit: contain !important;
	display: block;
}