/*
Theme Name:   Astra Child - 청라국제병원
Theme URI:    https://jsjhospital.co.kr/
Description:  네이버 SEO 최적화용 Astra 자식 테마. MedicalClinic / FAQPage / Person 스키마, 저자 박스, 의료광고 면책 문구를 포함한다.
Author:       ilsangisang
Template:     astra
Version:      2.1.3
Text Domain:  astra-child
*/

/* ---------------------------------------------
   본문 가독성 — 체류시간 확보용
   --------------------------------------------- */
.entry-content {
	font-size: 1.05rem;
	line-height: 1.9;
	word-break: keep-all;   /* 한글 어절 단위 줄바꿈 */
}

.entry-content h2 {
	margin-top: 2.6em;
	margin-bottom: 0.9em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid #e8e8ee;
	font-size: 1.5rem;
}

.entry-content h3 {
	margin-top: 2em;
	margin-bottom: 0.7em;
	font-size: 1.22rem;
}

.entry-content h4 {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	font-size: 1.06rem;
}

.entry-content p {
	margin-bottom: 1.5em;
}

/* ---------------------------------------------
   표 — 시술 비교용
   --------------------------------------------- */
.entry-content table {
	width: 100%;
	margin: 1.8em 0;
	border-collapse: collapse;
	font-size: 0.96rem;
}

.entry-content table th,
.entry-content table td {
	padding: 0.75em 0.9em;
	border: 1px solid #e2e2ea;
	text-align: left;
	vertical-align: top;
}

.entry-content table th {
	background: #f6f7fb;
	font-weight: 600;
	white-space: nowrap;
}

/* 좁은 화면에서 표가 페이지를 밀지 않도록 */
.entry-content .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------
   인용 / 강조 블록
   --------------------------------------------- */
.entry-content blockquote {
	margin: 1.8em 0;
	padding: 1.1em 1.4em;
	background: #f6f7fb;
	border-left: 4px solid #5b6b9a;
	color: #2f3542;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------
   면책 문구 (의료법 대응)
   --------------------------------------------- */
.ss-disclaimer {
	margin: 2.4em 0 1.2em;
	padding: 1em 1.2em;
	background: #fbfbfd;
	border: 1px solid #e6e6ee;
	border-radius: 6px;
	font-size: 0.88rem;
	line-height: 1.75;
	color: #6b6b7b;
}

/* ---------------------------------------------
   저자 박스 (E-E-A-T)
   --------------------------------------------- */
.ss-author-box {
	display: flex;
	gap: 1.1em;
	align-items: flex-start;
	margin: 2.6em 0 1em;
	padding: 1.4em;
	background: #f8f9fc;
	border: 1px solid #e6e8f0;
	border-radius: 10px;
}

.ss-author-box__avatar img {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
}

.ss-author-box__name {
	margin: 0 0 0.35em;
	font-size: 1.04rem;
	font-weight: 700;
	color: #22232b;
}

.ss-author-box__role {
	margin-left: 0.45em;
	font-size: 0.82rem;
	font-weight: 500;
	color: #7a7d8c;
}

.ss-author-box__bio {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.75;
	color: #4d505e;
}

@media (max-width: 480px) {
	.ss-author-box {
		flex-direction: column;
	}
}

/* ---------------------------------------------
   홈 헤더 (H1 영역)
   --------------------------------------------- */
.ss-home-hero {
	margin: 0 0 2.4em;
	padding: 2em 0 1.6em;
	border-bottom: 1px solid #e6e8f0;
}

.ss-home-hero__title {
	margin: 0 0 0.6em;
	font-size: 1.75rem;
	line-height: 1.4;
	word-break: keep-all;
}

.ss-home-hero__lead {
	margin: 0 0 1em;
	max-width: 46em;
	font-size: 1rem;
	line-height: 1.85;
	color: #4d505e;
	word-break: keep-all;
}

.ss-home-hero__links {
	margin: 0;
	font-size: 0.94rem;
}

.ss-home-hero__links a {
	display: inline-block;
	margin-right: 1.1em;
	padding-bottom: 1px;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

@media (max-width: 600px) {
	.ss-home-hero__title {
		font-size: 1.4rem;
	}
	.ss-home-hero__links a {
		margin-right: 0.8em;
	}
}

/* ---------------------------------------------
   관련 글 (내부링크)
   --------------------------------------------- */
.ss-related {
	margin: 2.4em 0 1em;
	padding: 1.3em 1.5em;
	background: #fff;
	border: 1px solid #e6e8f0;
	border-radius: 10px;
}

.ss-related__title {
	margin: 0 0 0.7em;
	font-size: 0.98rem;
	font-weight: 700;
	color: #22232b;
}

.ss-related__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-related__list li {
	margin: 0;
	padding: 0.55em 0;
	border-top: 1px solid #f0f1f6;
}

.ss-related__list li:first-child {
	border-top: 0;
}

.ss-related__list a {
	font-size: 0.95rem;
	line-height: 1.6;
	text-decoration: none;
	word-break: keep-all;
}

.ss-related__list a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------
   본문 내 CTA
   --------------------------------------------- */
.ss-cta {
	margin: 2.2em 0;
	padding: 1.3em 1.5em;
	background: #f4f6fc;
	border: 1px solid #dde2f0;
	border-radius: 10px;
	font-size: 0.96rem;
	line-height: 1.8;
}

.ss-cta p {
	margin: 0 0 0.5em;
}

.ss-cta p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------
   응급 신호 안내
   본문 톤과 같으면 지나친다. 다른 블록보다 눈에 띄되
   공포를 조장하지 않는 선에서 경고색을 쓴다.
   --------------------------------------------- */
.ss-urgent {
	margin: 2.2em 0;
	padding: 1.2em 1.4em;
	background: #fff6f4;
	border: 1px solid #f3cfc6;
	border-left: 4px solid #d9534f;
	border-radius: 8px;
	font-size: 0.96rem;
	line-height: 1.85;
}

.ss-urgent p {
	margin: 0;
}

/* ---------------------------------------------
   목차 (Easy TOC 보정)
   --------------------------------------------- */
#ez-toc-container {
	border-radius: 8px;
	background: #f8f9fc;
	border: 1px solid #e6e8f0;
}

/* ---------------------------------------------
   진료 분야 카드 목록 (캐러셀 원본)

   네이버 캐러셀은 "목록 구조가 명확한" 페이지에 부여된다.
   JSON-LD 의 ItemList 와 짝이 되는, 실제로 보이는 목록이다.
   숨기거나 display:none 을 걸지 말 것 — 마크업만 남으면
   보이지 않는 목록을 주장하는 상태로 되돌아간다.
   --------------------------------------------- */
.ss-cards {
	margin: 2.6em 0;
}

.ss-cards__title {
	margin: 0 0 0.9em;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.ss-cards__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1em;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ss-cards__item {
	margin: 0;
}

.ss-cards__link {
	display: block;
	overflow: hidden;
	border: 1px solid #e2e5ee;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ss-cards__link:hover,
.ss-cards__link:focus-visible {
	border-color: #b9c2da;
	box-shadow: 0 3px 14px rgba(30, 40, 70, 0.09);
}

.ss-cards__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #eef0f5;
}

.ss-cards__name {
	display: block;
	padding: 0.75em 0.9em 0;
	font-weight: 700;
	font-size: 1.02rem;
	word-break: keep-all;
}

.ss-cards__sub {
	display: block;
	padding: 0.25em 0.9em 0.95em;
	font-size: 0.86rem;
	line-height: 1.55;
	color: #5d6478;
	word-break: keep-all;
}

.ss-cards__item.is-current .ss-cards__link {
	border-color: #9aa6c6;
	background: #f7f8fc;
}

@media (max-width: 921px) {
	.ss-cards__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.ss-cards__list {
		grid-template-columns: 1fr 1fr;
		gap: 0.8em;
	}

	.ss-cards__name {
		font-size: 0.95rem;
	}

	.ss-cards__sub {
		font-size: 0.8rem;
	}
}

/* ---------------------------------------------
   랜딩 페이지의 칼럼 링크 목록
   --------------------------------------------- */
.ss-post-links {
	margin: 0.6em 0 0.9em;
	padding-left: 1.15em;
}

.ss-post-links li {
	margin-bottom: 0.45em;
	line-height: 1.65;
	word-break: keep-all;
}

.ss-post-links__more {
	margin: 0 0 1.6em;
	font-size: 0.95rem;
}

/* Astra 가 `.ast-single-post .entry-content a` 에 밑줄을 넣는다(명시도 0,2,1).
   카드는 예외로 두어야 하므로 그보다 높은 명시도로 덮는다.
   text-decoration 은 자손에서 끌 수 없고 <a> 자신에게 걸어야 한다. */
.ast-single-post .entry-content .ss-cards__link,
.ast-single-post .entry-content .ss-cards__link:hover,
.ast-single-post .entry-content .ss-cards__link:focus,
.entry-content .ss-cards__link,
.ss-cards .ss-cards__link {
	text-decoration: none;
}

/* ---------------------------------------------
   랜딩 페이지 대표 이미지 높이 제한

   진료 대분류 랜딩 페이지의 대표 이미지는 캐러셀 카드와 같은 파일이라
   1200×1200 정사각이다. Astra 는 이걸 본문 위 히어로로 전폭 출력하는데,
   그대로 두면 H1 과 본문이 첫 화면 밖으로 밀려난다.

   숨기지는 않는다 — 대상 페이지가 제 대표 이미지를 실제로 보여 주는 것이
   캐러셀 조건이기도 하다. 높이만 잡는다.
   --------------------------------------------- */
.ast-single-post-featured-section.post-thumb img {
	width: 100%;
	max-height: 360px;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 10px;
}

@media (max-width: 600px) {
	.ast-single-post-featured-section.post-thumb img {
		max-height: 220px;
	}
}