/* ---------------------------------------------------------------------------------------------------------------------
   이호석한의원 소개형(브랜드) 페이지 — layout "brand" 전용 (templates/user/page-layouts/brand.html 이 로드)
   출처: test2.noszip.com herb-standard.html · sasang.html 페이지 <style>(2026-10-18판) 병합 — 페이지 전용 클래스(pt-card·sa-*)는 겹치지 않는다.
   요소 모양은 jy-components.css(원본 클래스). 범위는 .jy-brand 래퍼.
   구조: 문서 섹션(GROUP) = 원본 section(cls) > 안쪽 래퍼(innerCls) > 요소 블록. 블록 래퍼(div.sec-custom)는 투명(display:contents) —
   원본에서 요소들이 래퍼의 flex·grid 자식으로 바로 배치되던 것을 그대로 재현한다.
--------------------------------------------------------------------------------------------------------------------- */

/* ── 1. 래퍼 · 리셋 (원본 페이지 <style> 공통부) — 리셋은 :where 로 특이도 0 ── */
.page-wrap:has(> main > .jy-brand){ max-width:none; padding:0; }
.jy-brand{ color:var(--ink); font-family:var(--font-sans); font-size:17px; line-height:1.9; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; }
:where(.jy-brand) :where(*){ box-sizing:border-box; }
/* 제목은 0,0,1 — 원본 클래스(0,1,0)에는 진다 */
:where(.jy-brand) :is(h1,h2,h3,h4){ margin:0; font-family:var(--font-serif); font-weight:600; letter-spacing:-0.028em; }
:where(.jy-brand) :where(blockquote p:first-child){ font-family:var(--font-serif); }
:where(.jy-brand) :where(p){ margin:0; text-wrap:pretty; }
:where(.jy-brand) :where(a){ color:var(--accent); text-decoration:none; }
:where(.jy-brand) :where(a:hover){ color:var(--gold); }
:where(.jy-brand) :where(ul,ol){ margin:0; padding:0; list-style:none; }
:where(.jy-brand) :where(img){ height:auto; }
/* 공통 post-content.css 의 blockquote(왼쪽 선·여백, 0,0,1)를 되돌린다 — 뒤에 로드되어 이기고, 원본 클래스(.blockquote-30)에는 진다 */
:where(.jy-brand) blockquote{ margin:0; padding:0; border:0; background:none; }

/* 요소 블록 래퍼 투명 — 원본 flex/grid 배치 유지 */
.jy-brand .sec-custom, .jy-brand .sec-custom__body{ display:contents; }

/* 반응형 줄바꿈 — br-d: 데스크톱만 / m-br: 모바일만 */
.jy-brand .m-br{ display:none; }

/* ── 2. 원본 반응형 (공통) ── */
@media (max-width:768px){ .jy-brand h1{ font-size:29px !important; } }
@media (max-width:860px){
	.jy-brand .four-grid, .jy-brand .end-grid, .jy-brand .doc-grid, .jy-brand .d-grid{ grid-template-columns:1fr !important; gap:28px !important; }
}
@media (max-width:620px){ .jy-brand h2{ font-size:27px !important; } }

/* 김포한약 이호석의 기준 — 4가지 기준 카드 */
@media (max-width:760px){
	.jy-brand .pt-card{ grid-template-columns:1fr !important; gap:26px !important; padding:34px 28px !important; }
	.jy-brand .pt-card > img:first-child, .jy-brand .pt-card > div:first-child{ width:160px !important; max-width:160px; margin-left:auto; margin-right:auto; }
	.jy-brand .pt-card h3{ flex-direction:column !important; align-items:center !important; text-align:center; gap:12px !important; }
	.jy-brand .pt-card h3 > span[aria-hidden]{ flex:none; }
	.jy-brand .pt-card > div{ text-align:center; }
	.jy-brand .pt-card > div *{ text-align:center !important; }
}

/* 사상체질과 맞춤처방 — 체질 카드·사례·약재 표 */
@media (max-width:1000px){
	.jy-brand .sa-4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
	.jy-brand .sa-3{ grid-template-columns:1fr !important; }
	.jy-brand .sa-case{ grid-template-columns:1fr !important; }
}
@media (max-width:560px){ .jy-brand .sa-4{ grid-template-columns:1fr !important; } }
@media (max-width:640px){
	.jy-brand .ht-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; row-gap:18px; }
	.jy-brand .ht-grid > div:nth-child(n+4) > span[aria-hidden]{ display:none; }
	.jy-brand .m-br{ display:inline; }
	.jy-brand .sa-case > div{ padding:28px 22px !important; }
	.jy-brand .sa-case > img{ min-height:280px !important; }
	/* 약재 표 — 원본도 640px 이하에서만 */
	.jy-brand .sa-herb{ min-width:0 !important; }
	.jy-brand .sa-herb th[scope="col"]{ padding:12px 4px !important; font-size:15px !important; }
	.jy-brand .sa-herb th[scope="col"] > span{ font-size:15px !important; gap:5px !important; }
	.jy-brand .sa-herb th[scope="col"] :is(svg, img){ width:18px; height:18px; flex:none; }   /* 아이콘은 이관 시 PNG 이미지로 바뀐다 */
	.jy-brand .sa-herb th[scope="row"]{ padding:14px 6px !important; font-size:16px !important; }
	.jy-brand .sa-herb td{ padding:14px 6px !important; }
	.jy-brand .sa-herb td > span{ width:auto !important; flex-direction:column; justify-content:center; gap:6px !important; }
	.jy-brand .sa-herb td > span > span{ font-size:14px !important; line-height:1.4 !important; letter-spacing:-0.02em; }
	.jy-brand .sa-herb td > span > span.m-radius{ padding:3px 10px !important; }
}
/* 한의원 소개 — 특징 카드(pk-*)·5대 특화 오각형(pent-wrap ↔ 모바일 목록 pent-sm) */
@media (max-width:1000px){ .jy-brand .pk-4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:880px){
	.jy-brand .pk-row{ grid-template-columns:1fr !important; }
	.jy-brand .pk-rev > div:last-child{ order:-1; }
}
@media (max-width:560px){ .jy-brand .pk-4{ grid-template-columns:1fr !important; } }
.jy-brand .pent-sm{ display:none; counter-reset:spec; }
.jy-brand .pent-sm > div > h3::before{ counter-increment:spec; content:counter(spec, decimal-leading-zero); display:inline-block; margin-right:10px;
	font-family:var(--font-heading, "Noto Serif KR", serif); font-weight:700; font-size:19px; color:#2E733B; letter-spacing:0.02em; }
@media (max-width:720px){
	.jy-brand .pent-wrap{ display:none; }
	.jy-brand .pent-sm{ display:grid !important; }
}

/* 진료시간·위치 — 2단(진료시간 | 오시는 길) → 1단, 지도 높이 */
@media (max-width:900px){ .jy-brand .loc-grid{ grid-template-columns:1fr !important; gap:22px !important; } }
@media (max-width:640px){ .jy-brand .div-bg-3:has(> .clinic-map-box){ aspect-ratio:auto !important; min-height:240px !important; } }

(원본 nav[aria-label="서브 메뉴"] → 블록에서는 div.nav-bg-line) · 모바일 보정 ── */
@media (max-width:640px){
	.jy-brand .nav-bg-line > div{ justify-content:flex-start !important; gap:0 !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
	.jy-brand .nav-bg-line > div > a:first-child{ margin-left:auto; }
	.jy-brand .nav-bg-line > div > a:last-child{ margin-right:auto; }
	.jy-brand .nav-bg-line a{ height:56px !important; padding:0 16px !important; font-size:15.5px !important; }
	.jy-brand .m-fs4:not([aria-hidden]){ font-size:29px !important; letter-spacing:-0.04em !important; line-height:1.42 !important; }
	.jy-brand .m-fs3:not([aria-hidden]){ font-size:25px !important; letter-spacing:-0.035em !important; line-height:1.45 !important; }
	.jy-brand h1{ font-size:clamp(26px,8vw,32px) !important; }
	.jy-brand h2{ font-size:clamp(24px,7.2vw,29px) !important; line-height:1.42 !important; }
	.jy-brand figure{ max-width:100% !important; box-sizing:border-box !important; padding-left:22px !important; padding-right:22px !important; width:auto !important; }
	.jy-brand blockquote{ font-size:clamp(19px,5.6vw,23px) !important; }
	.jy-brand :is(p, li){ word-break:keep-all; overflow-wrap:anywhere; }
	.jy-brand :is(img, video, iframe){ max-width:100%; }
	.jy-brand .br-d{ display:none; }
}
@media (max-width:1000px){
	.jy-brand :is(h1, h2, h3, h4, dt, dd, blockquote, figcaption){ word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
}

/* ── 4. hover (원본 style-hover 변환) ── */
.jy-brand .hv-1:hover{ color:#2E733B !important; }
.jy-brand .hv-2:hover{ background:#fff !important; color:#20291f !important; }
.jy-brand .hv-3:hover{ background:#fff !important; color:#20291f !important; border-color:#fff !important; }   /* 한의원 소개 마무리 버튼 */
/* 진료시간·위치의 네이버 초록 버튼 — 원본 이 페이지의 hv-2 는 글자색만(배경 유지) */
.jy-brand :is(.div-bg-3, .contact-row) .hv-2:hover{ background:rgb(3, 199, 90) !important; color:#fff !important; }

/* ── 5. 병원 데이터 치환자 (진료시간·위치 페이지 — import-test2-brand.py 가 원본 예시 값을 바꿔 넣는다) ── */
/* [##_hours.table_##] → table.hours-table 을 원본 표(.table-line · .th-16-line · .td-16_5-line) 모양으로 */
.jy-brand .jy-hours .hours-table{ margin-top:26px; width:100%; border-collapse:collapse; border-bottom:1px solid rgb(228, 232, 220); }
.jy-brand .jy-hours .hours-table th{ padding:15px 0; border:0; border-top:1px solid rgb(228, 232, 220); text-align:left; font-weight:400;
	font-size:16px; color:rgb(95, 106, 96); white-space:nowrap; }
.jy-brand .jy-hours .hours-table td{ padding:15px 0; border:0; border-top:1px solid rgb(228, 232, 220); text-align:right;
	font-size:16.5px; color:rgb(31, 38, 33); }
/* [##_map_##] → 원본 지도 자리(.div-bg-3, 16:6·최소 300px)를 지도가 꽉 채우고, 길찾기 버튼은 지도 위에 */
.jy-brand .div-bg-3 > .clinic-map-box{ position:absolute; inset:0; aspect-ratio:auto; min-height:0; border-radius:0; background:none; }
.jy-brand .div-bg-3 > a{ z-index:2; }