/* ---------------------------------------------------------------------------------------------------------------------
   이호석한의원 질환 아티클 — layout "disease" 전용 (templates/user/page-layouts/disease.html 이 로드)
   출처: test2.noszip.com site.css 의 body.page--article 토큰 + 질환 페이지 공통 <style>(59개 동일) — 2026-10-18판.
   요소 모양은 jy-components.css(원본 클래스). 여기에는 토큰·리셋·래퍼·모바일 보정·hover 만 둔다.
   범위는 .jy-article 래퍼 — 다른 페이지(홈 등)에 새지 않는다.
--------------------------------------------------------------------------------------------------------------------- */

/* ── 1. 토큰 (원본 body.page--article) ── */
.jy-article{
	--article-accent:       #26703A;
	--article-accent-hi:    #2f8a45;
	--article-accent-deep:  #256f37;
	--article-accent-press: #1F5E30;
	--article-soft:         #eef6ea;
	--article-gold:         #C79233;
	--article-ink:          #191e14;
	--article-muted:        #191e14;
	--article-line:         #CCCCCC;
	--article-title:        #1b1f1a;
	--article-text:         #4a4f46;
	--article-muted2:       #6b7263;
	--article-dot:          #c9cec3;
	--article-box:          #f6f7f4;
	--article-border:       #e4e6e0;
	--toc-active: var(--article-accent-hi);
	--toc-idle:   var(--article-ink);
	--line:       #e6e3db;

	color:var(--article-ink);
	font-family:var(--font-doc, var(--font-body, Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif));
	font-size:17px; line-height:1.9; letter-spacing:-0.3px; -webkit-font-smoothing:antialiased;
}
/* 원본 body.page--article 은 배경·자간을 body 에 준다 — 헤더 메뉴·푸터 글자도 -0.3px (공통 body 는 -0.01em) */
body:has(.jy-article){ background:#fff; letter-spacing:-0.3px; }
/* 공통 본문 래퍼(.page-wrap, 좌우 22px)를 비운다 — 폭·여백은 원본 main.main-flex(최대 1240, 좌우 26px)가 가진다 */
.page-wrap:has(> main > .jy-article){ max-width:none; padding:0; }

/* ── 2. 리셋 (원본 페이지 <style>) — 전부 :where() 로 감싸 특이도 0. 요소 클래스(.p-18-10 등, 특이도 0,1,0)가 항상 이긴다
      (".jy-article :where(p)" 는 .jy-article 때문에 0,1,0 이 되어 뒤에 로드된 리셋이 클래스 여백을 지웠다 — 2026-10-19) ── */
:where(.jy-article) :where(*){ box-sizing:border-box; }
/* 제목은 0,0,1 — 병원 공통 h1~h4(명조·600, 0,0,1)보다 뒤에 로드되어 이기고, 원본 클래스(0,1,0)에는 진다 */
:where(.jy-article) :is(h1,h2,h3,h4){ margin:0; font-weight:700; letter-spacing:-0.8px; font-family:inherit; }
:where(.jy-article) :where(p){ margin:0; text-wrap:pretty; }
:where(.jy-article) :where(ul,ol){ margin:0; padding:0; list-style:none; }
:where(.jy-article) :where(figure){ margin:0; }
/* 공통 post-content.css 의 전역 blockquote(빌더 인용 블록용) 되돌림 — 0,0,1, 원본 클래스에는 진다 */
:where(.jy-article) blockquote{ margin:0; padding:0; border:0; border-radius:0; background:none; }
:where(.jy-article) :where(a){ color:var(--article-accent-hi); text-decoration:none; }
:where(.jy-article) :where(a:hover){ color:var(--article-accent-deep); }
/* 블록 img 의 width/height 속성(CLS 방지용)이 원본 aspect-ratio 를 이기지 않도록 — 클래스가 height 를 정하면 그쪽이 이긴다 */
:where(.jy-article) :where(img){ height:auto; }
.jy-article h1 em{ font-style:normal; box-shadow:inset 0 -0.42em 0 rgba(140,198,63,0.32); }

/* ── 3. 섹션 래퍼(우리 블록 구조)는 투명 — 간격은 요소 클래스(margin-top)가 원본 수치대로 가진다 ── */
.jy-article .sec{ margin:0; padding:0; border:0; }
.jy-article .sec-group{ scroll-margin-top:110px; }
.jy-article .doc-sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── 4. 목차 (원본 .toc) — 1160px 미만 숨김. 강조 색은 jy-article.js 가 --toc-* 로 칠한다 ── */
.jy-article .toc a:hover{ color:var(--article-accent-hi); }
.jy-article .toc[hidden]{ display:none !important; }
@media (max-width:1160px){
	.jy-article .toc{ display:none !important; }
	.jy-article.main-flex{ justify-content:center !important; }
}

/* ── 5. hover (원본 style-hover 변환) ── */
.hv-1:hover{ background:var(--article-accent) !important; color:#fff !important; border-color:var(--article-accent) !important; }
.hv-2:hover{ color:var(--article-accent) !important; }
.hv-3:hover{ background:var(--article-accent-press) !important; color:#fff !important; }
.hv-4:hover{ color:var(--article-accent-press) !important; }

/* ── 6. 모바일 (원본 mobile-polish + site.css 9. 모바일 보정) ── */
@media (max-width:768px){ .jy-article h1{ font-size:29px !important; } }
@media (max-width:640px){
	.jy-article .jy-cards{ grid-template-columns:1fr !important; }
	.jy-article .jy-rel{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
	.jy-article .m-fs4:not([aria-hidden]){ font-size:29px !important; letter-spacing:-0.04em !important; line-height:1.42 !important; }
	.jy-article .m-fs3:not([aria-hidden]){ font-size:25px !important; letter-spacing:-0.035em !important; line-height:1.45 !important; }
	/* 원본 우선순위 재현 — 제목은 .m-fs4(29px)보다 강한 선택자(원본: body.page--article article h1[class]) */
	.jy-article.main-flex article h1[class]{ font-size:clamp(30px,8.6vw,36px) !important; text-align:center; }
	.jy-article h2{ font-size:clamp(24px,7.2vw,29px) !important; line-height:1.42 !important; }
	.jy-article :is(p, li){ word-break:keep-all; overflow-wrap:anywhere; }
	.jy-article :is(img, video, iframe){ max-width:100%; }
	.jy-article figure{ width:auto !important; padding-left:0 !important; padding-right:0 !important; }
	.jy-author{ flex-wrap:nowrap !important; align-items:center !important; }
	.jy-author > div{ flex:1 1 auto; min-width:0; }
	/* 하단 원장 소개 + 상담 버튼 박스 */
	.jy-article .div-flex-bg-4{ justify-content:center !important; padding:24px 20px !important; gap:18px !important; }
	.jy-article .div-flex-bg-4 > div{ width:100%; }
	.jy-article .div-flex-bg-4 p > span:first-child{ font-size:19px !important; }
	.jy-article .div-flex-bg-4 p > span + span{ font-size:15px !important; }
	.jy-article .div-flex-bg-4 p + p{ font-size:16px !important; line-height:1.55 !important; }
	.jy-article .div-flex-bg-4 > a[href^="tel:"]{ padding:12px 24px !important; font-size:16px !important; }
}
@media (max-width:1000px){
	.jy-article :is(h1, h2, h3, h4, figcaption){ word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
}

/* 관련 칼럼 — 대표 이미지 없는 글의 자리(원본 칼럼 카드의 빗금 배경 span-bg-7 을 img-x-18 비율·모서리로) */
.jy-article .jy-rel-ph{ border-radius:10px; }