/* =========================================================================
   disease-modal.css — 「질환 안내」 모달 + 질환 항목의 누를 수 있는 표시

   지면 조판(ad-guide.css)의 어휘를 그대로 빌린다. 모달은 본문 위에 뜨지만
   본문에서 이어지는 화면이라, 색·서체가 달라지면 다른 사이트처럼 보인다.
   ========================================================================= */

/* 누를 수 있다는 표시 -----------------------------------------------------
   원인 스트립·질환 카드의 항목에 data-disease-id 가 붙으면 눌리는 것이 된다.
   테두리를 두르거나 색을 바꾸지 않는다 — 스트립은 선 하나로 칸을 나누는
   조판이라, 항목마다 상자가 생기면 그 결이 깨진다.
   대신 커서·밑줄·화살표로만 알린다. */
[data-disease-id] {
	cursor: pointer;
	transition: opacity .18s ease;
}
[data-disease-id]:hover { opacity: .78; }
[data-disease-id]:focus-visible {
	outline: 2px solid var(--medisync01-orange, #090A73);
	outline-offset: 4px;
	border-radius: 4px;
}
/* 제목 뒤에 작은 안내 표식 — "누르면 더 있다"를 말없이 알린다. */
[data-disease-id] > h3::after,
[data-disease-id] > h3 + small::after {
	content: "＋";
	display: inline-block;
	margin-left: 6px;
	font-size: .72em;
	font-weight: 600;
	vertical-align: 2px;
	color: var(--medisync01-orange-soft, #3A3BA0);
}
[data-disease-id]:hover > h3::after { color: var(--medisync01-orange, #090A73); }

/* 모달 ------------------------------------------------------------------- */

.dzm {
	position: fixed;
	inset: 0;
	z-index: 10000;      /* 헤더(40)·예약 팝업(9999) 위 */
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 48px);
}
.dzm[hidden] { display: none; }

.dzm__veil {
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 40, .58);
	backdrop-filter: blur(2px);
}

.dzm__panel {
	position: relative;
	width: min(680px, 100%);
	max-height: min(86vh, 900px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 44px) clamp(24px, 3.4vw, 38px);
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 30px 80px -24px rgba(9, 10, 60, .45);
	color: var(--medisync01-ink-2, #2F2F2F);
	font-family: var(--medisync01-font, "Noto Sans KR", sans-serif);
}

.dzm__x {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: var(--medisync01-ink-3, #8D827B);
	cursor: pointer;
}
.dzm__x:hover { background: var(--medisync01-bg-warm, #F4F8FC); color: var(--medisync01-ink-2, #2F2F2F); }

.dzm__kicker {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--medisync01-orange, #090A73);
}
.dzm__title {
	margin: 0 0 4px;
	font-size: clamp(22px, 2.6vw, 29px);
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.03em;
	color: #1C2331;
	word-break: keep-all;
}
.dzm__en {
	margin: 0 0 18px;
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--medisync01-ink-3, #8D827B);
}
/* 간단 소개글 — 다른 지면이 인용하는 그 한 문장. 본문보다 한 급 크게 둔다. */
.dzm__summary {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-left: 3px solid var(--medisync01-orange, #090A73);
	background: #EAF3FB;
	font-size: clamp(14.5px, 1.4vw, 16px);
	line-height: 1.75;
	color: #1C2331;
	word-break: keep-all;
}

.dzm__figs { margin: 0 0 22px; display: grid; gap: 12px; }
.dzm__figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dzm__fig {
	margin: 0;
	border: 1px solid #E4EAF1;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.dzm__fig img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;   /* 순백 배경 삽화라 잘리면 안 된다 */
	background: #fff;
}

/* 긴 소개글 — 허용 태그가 <p><strong><u><ul><li><h4> 뿐이라 규칙도 그만큼이다. */
.dzm__body { font-size: 15px; line-height: 1.9; color: #57616F; }
.dzm__body p { margin: 0 0 1.1em; word-break: keep-all; }
.dzm__body p:last-child { margin-bottom: 0; }
.dzm__body h4 {
	margin: 26px 0 10px;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #1C2331;
}
.dzm__body strong { font-weight: 600; color: #1C2331; }
/* 응급 신호에만 쓰는 밑줄 — 브랜드색으로 그어 "강조"임을 분명히 한다. */
.dzm__body u {
	text-decoration: underline;
	text-decoration-color: var(--medisync01-orange, #090A73);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	color: #1C2331;
	font-weight: 600;
}
.dzm__body ul { margin: 0 0 1.1em; padding-left: 0; list-style: none; }
.dzm__body li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 7px;
	word-break: keep-all;
}
.dzm__body li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .78em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--medisync01-orange-soft, #3A3BA0);
}

.dzm__note {
	margin: 26px 0 0;
	padding-top: 16px;
	border-top: 1px solid #E4EAF1;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--medisync01-ink-3, #8D827B);
}

@media (max-width: 560px) {
	.dzm { padding: 0; place-items: end center; }
	.dzm__panel {
		width: 100%;
		max-height: 92vh;
		border-radius: 18px 18px 0 0;   /* 바닥에서 올라오는 시트로 */
	}
	.dzm__figs--2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	[data-disease-id] { transition: none; }
}

/* Inline disease names retain the guide typography and open the same dialog. */
.sg-body a.dzm-inline{color:inherit;font:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--brand-primary,#090a73);text-underline-offset:4px}
.sg-body a.dzm-inline:hover{color:var(--brand-primary,#090a73)}
.dzm__page{display:block;margin-top:24px;padding:13px 18px;border:1px solid #dfe4ec;border-radius:8px;color:var(--brand-primary,#090a73);text-decoration:none;font-size:13px;font-weight:600;text-align:center}
.dzm__page[hidden]{display:none}
.dzm__page:hover{background:#f4f7fb}