/* =====================================================================
 * 신규 사이트 전용 보정 — 원본 CSS(`common.css` 등)는 건드리지 않는다.
 *
 * 원본을 직접 고치면 무엇이 원본이고 무엇이 우리 판단인지 구분이 사라진다
 * (docs/original-fidelity.md). 그래서 덮어쓰는 규칙만 이 파일에 모은다.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * ★ hidden 속성이 실제로 숨기게 만든다 (2026-10-06 실측으로 찾은 결함)
 *
 * 브라우저 기본 규칙은 `[hidden] { display: none }` 인데, 이것은 **UA 스타일시트**라
 * 저자 CSS 의 `display` 선언에 **진다**. 그래서 display 를 지정한 class 가 붙은 요소는
 * `el.hidden = true` 로도 **사라지지 않는다.**
 *
 * 실측(2026-10-06, /member/profile 소셜 분기, Chrome headless 1280px):
 *   board.css  `.ck_bx { display: inline-block }`
 *   → `<div class="ck_bx" id="pfSmsBox" hidden>` 가 computed display=inline-block 으로 **보였다.**
 *     소셜 회원에게 "SMS 수신여부 읽기전용 글자"와 "체크박스"가 **함께** 떴다.
 *
 * 범위 실측: 15개 화면의 `[hidden]` 요소 **19개** 중 어긋난 것은 **이 하나뿐**이다
 * (나머지 18개는 이미 display:none). 즉 이 규칙이 바꾸는 것은 그 하나이고, 그것이 고치려는 것이다.
 *
 * ★개별 화면에서 style.display 로 피하지 않고 여기에 두는 이유:
 *   같은 함정이 **display 를 가진 모든 class 에** 있다. 화면마다 피하면 다음 화면에서 또 난다.
 *   `[hidden]` 에 `!important` 를 주는 것은 흔한 기본 보정이다(대부분의 CSS reset 이 그렇게 한다).
 * --------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
 * 우측 플로팅 퀵메뉴와 본문 겹침 (2026-09-08 원장님 지적)
 *
 * 실측값 (Chrome 147, /clinic/clinic0104):
 *   PC(≥991px)   퀵메뉴 95px 폭 + 우측여백 8px = 우측 103px 점유, 화면 세로 중앙
 *   ≤990px       퀵메뉴가 **하단 고정바**로 바뀐다(폭 100%, 높이 117~120px)
 *   본문 컬럼     .layout / .container  max-width: 1200px
 *
 * 그래서 겹침은 **뷰포트 1200~1406px 구간**에서 생긴다.
 *   1200 + 103×2 = 1406  → 이보다 좁으면 본문 우측이 퀵메뉴 밑으로 들어간다.
 *   실측: 1440px 정상 / 1200px 겹침 2건 (원장님이 보신 "2차" 글자 잘림)
 *
 * 원본도 같은 문제를 안고 있다. common.css 에 "2026-06 데스크톱 플로팅 메뉴
 * 컴팩트화(우측 콘텐츠 가림 완화)"라는 주석이 있는데, **메뉴를 줄였을 뿐
 * 본문 폭에서 그 자리를 빼지는 않았다.** 그래서 좁은 PC 폭에서 여전히 겹친다.
 *
 * 고치는 방법 — 두 가지를 피했다:
 *   ✗ `#mainContent` 에 padding 을 주는 방법: 배경이 화면 끝까지 깔리는
 *     full-bleed 섹션까지 안쪽으로 밀려 원본 디자인이 바뀐다.
 *   ✗ 여백을 넉넉히 주는 방법: 넓은 화면에서 본문이 이유 없이 좁아진다.
 *   ✓ **본문 컬럼(.layout/.container)의 max-width 만** 화면폭에 따라 줄인다.
 *     좌우 대칭이라 가운데 정렬이 유지되고, 배경 밴드는 그대로 화면을 채운다.
 *     넓은 화면에서는 1200px 제한이 먼저 걸려 아무 변화가 없다.
 * --------------------------------------------------------------------- */
:root {
	--hk-quick-w: 0px;   /* PC: 퀵메뉴가 우측에서 점유하는 폭 */
	--hk-quick-h: 0px;   /* 모바일: 하단바 높이 */
}

@media (min-width: 991px) {
	:root {
		/* 95(폭) + 8(우측여백) + 9(최소 숨쉴 틈) = 112 */
		--hk-quick-w: 112px;
	}
	#mainContent .layout,
	#mainContent .container {
		/* 좌우 대칭으로 빼야 가운데 정렬이 흐트러지지 않는다 */
		max-width: min(1200px, calc(100vw - var(--hk-quick-w) * 2));
	}
}

@media (max-width: 990px) {
	:root {
		/* 실측 117~120px. 12px 은 마지막 줄이 바에 닿지 않도록 두는 틈 */
		--hk-quick-h: 120px;
	}
	/* 하단바는 화면 아래에 고정되므로, 폭이 아니라 **아래 여백**이 필요하다.
	 * footer 까지 포함해 밀어야 마지막 콘텐츠가 바에 가리지 않는다. */
	#wrap {
		padding-bottom: calc(var(--hk-quick-h) + 12px);
	}
}

/* ---------------------------------------------------------------------
 * 글자 잘림 방지 — 폭이 줄어든 뒤에도 문장이 요소 경계에서 끊기지 않게 한다.
 * 원본이 `#mainContent` 에 word-break:keep-all 을 이미 주고 있으나,
 * 고정폭(px)·nowrap 이 걸린 요소는 그 규칙을 통과하지 못한다.
 * --------------------------------------------------------------------- */
#mainContent .layout,
#mainContent .container {
	box-sizing: border-box;
}
#mainContent p,
#mainContent li,
#mainContent span,
#mainContent strong,
#mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4 {
	min-width: 0;              /* flex/grid 안에서 줄바꿈이 막히는 것을 푼다 */
	overflow-wrap: break-word; /* 긴 URL·영문이 컨테이너를 밀어내지 않게 */
}

/* ---------------------------------------------------------------------
 * 서브탭 바(ul.dep02) — `.layout` 래퍼 없이 전체폭으로 깔리는 페이지가 있다.
 * (예: /clinic/clinic01 은 `div.cilnicS > ul.dep02` 구조라 위의 .layout 제한이 닿지 않는다.
 *  원장님이 보신 "치료사례" 글자가 TOP 버튼에 가린 것이 바로 이 탭이다.)
 *
 * 탭바는 `table-layout:fixed` 라 padding-right 를 주면 칸들이 알아서 좁아지며 재분배된다.
 * 배경 밴드가 아니라 탭 자체가 줄어드는 것이라 디자인이 깨지지 않는다.
 *
 * 겹칠 수 있는 구간에서만 건다: 1200(본문 최대폭) + 112×2 = 1424px 미만.
 * --------------------------------------------------------------------- */
@media (min-width: 991px) and (max-width: 1424px) {
	#mainContent ul.dep02 {
		box-sizing: border-box;
		padding-right: var(--hk-quick-w);
	}
}

/* ---------------------------------------------------------------------
 * ★ 퀵메뉴 전환점 상향: 990px → 1424px (2026-09-08)
 *
 * 왜 필요한가 — 전수 스윕(56페이지 × 7화면폭 = 392건)에서 드러난 것:
 *   우측 고정 퀵메뉴는 본문 컬럼이 그 자리까지 닿는 모든 폭에서 글자를 가린다.
 *   본문 컬럼 최대폭 1200 + 퀵메뉴 점유 112 × 2(좌우 대칭) = **1424px**.
 *   이보다 좁으면 반드시 겹친다. 실측 겹침: 1440·1300·1200·1024px 에서 발생.
 *
 * 왜 본문 폭만 줄이는 것으로는 못 고치는가:
 *   페이지마다 본문 래퍼가 다르다 — `.layout`, `.container`, 그리고
 *   `div.cilnicS > div[max-width:980px]` 같은 **페이지 로컬 래퍼**까지 있다.
 *   선택자를 아무리 늘려도 다음 페이지에서 또 새는 구조다.
 *   `#mainContent` 에 padding 을 주면 `div.cilnicS` 같은 **full-bleed 배경 밴드**가
 *   화면 끝에 닿지 못해 디자인이 깨진다.
 *
 * 그래서 전환점만 옮긴다:
 *   ≥1424px  우측 고정 (원본 데스크톱 디자인 그대로. 이 폭에서는 겹치지 않는다)
 *   <1424px  하단 고정바 (**원본이 이미 990px 이하용으로 갖고 있는 디자인**을 그대로 쓴다)
 *
 * 원본과 다른 점은 **전환 시점 하나뿐**이고, 두 디자인 모두 원본 것이다.
 * 원장님 요구("텍스트가 요소 경계에서 잘리는 일이 없어야 한다")를 만족하는
 * 유일한 방법이라 이렇게 했다.
 * --------------------------------------------------------------------- */
@media (min-width: 991px) and (max-width: 1423px) {
	/* 원본이 990px 이하에 주던 하단바 스타일을 이 구간까지 끌어올린다 */
	#new_quick { right: 0; top: auto; bottom: 0; transform: translateY(0); width: 100%; }
	#new_quick .mall { display: none; }
	#new_quick .listwrap { display: flex; border-radius: 0; padding: 0; box-shadow: none; }
	/* 상시 노출 5개 + TOP = 6칸 (2026-09-12 확정. 예전에는 8칸이었다) */
	#new_quick .listwrap .list { width: calc(100% / 6); border-bottom: 0; }
	#new_quick .list { background: #006fc0; padding: 1.1rem 0; position: relative; border-radius: 0; }
	#new_quick .list span { color: #fff; font-size: 12px; font-weight: 700; }
	#new_quick .list img { filter: brightness(0) invert(1); order: -1; margin-bottom: 0.4rem; width: 22px; height: auto; }
	#new_quick .list a { flex-direction: column; }
	#new_quick .list:hover span { color: #fff; }
	#new_quick .list:hover img { filter: brightness(0) invert(1); }
	#new_quick .list:last-child { background: #006fc0; padding: 1.1rem 0; }

	/* 하단바가 마지막 콘텐츠를 가리지 않도록 아래 여백.
	 *
	 * ★108px 은 모자랐다 (2026-10-09 실측). 이 구간에서 바 높이가 **화면마다 다르다**:
	 *     /clinics/* · /privacy-policy · /terms  **112.6px**   (html 글자 16px)
	 *     /reservation/kakao · /notice           100.5px      (html 글자 13px)
	 *     /                                      107.6px
	 *   바가 `padding: 1.1rem 0` 을 쓰는데 **페이지마다 html 글자 크기가 달라서** 높이가 따라 변한다.
	 *   그래서 108 로는 가장 높은 112.6px 짜리 화면 12곳에서 **4.1~4.8px 겹쳤다**(저작권 줄).
	 * → 가장 높은 값을 기준으로 잡고, 위쪽 구간(990px 이하)이 쓰는 것과 **같은 여유 12px**를 준다.
	 *   값을 바꾼 것은 여백 하나뿐이다 — 바의 칸 수·높이·글자는 건드리지 않았다. */
	#wrap { padding-bottom: calc(113px + 12px); }

	/* 이 구간에서는 우측을 비워둘 필요가 없다 — 본문 폭 제한을 되돌린다 */
	:root { --hk-quick-w: 0px; }
	#mainContent .layout,
	#mainContent .container { max-width: 1200px; }
	#mainContent ul.dep02 { padding-right: 0; }
}

/* ---------------------------------------------------------------------
 * ≥1424px (우측 고정 구간) 잔여 보정 2건 — 전수 스윕에서 남은 것.
 * --------------------------------------------------------------------- */
@media (min-width: 1424px) {
	/* ① 서브탭 바가 `.layout` 없이 전체폭으로 깔리는 페이지(/clinic/clinic01·clinic02).
	 *    padding 이 아니라 **max-width + 가운데 정렬**로 잡는다 —
	 *    `.layout` 안에 들어 있는 정상 탭바에는 아무 영향이 없고(이미 1200 이하),
	 *    전체폭으로 새는 것만 같은 폭으로 끌어당긴다. */
	#mainContent ul.dep02 {
		max-width: min(1200px, calc(100vw - var(--hk-quick-w) * 2));
		margin-left: auto;
		margin-right: auto;
	}

	/* ② 메인 슬라이더의 다음 버튼이 퀵메뉴와 겹친다(실측 13px).
	 *    원본 규칙이 `#main .sec01 .slide .slick-next{right:90px}` 로 구체적이라
	 *    같은 구체성으로 맞받아야 한다 — !important 로 덮으면 다음 사람이 원인을 못 찾는다.
	 *    좌측 버튼(slick-prev)은 겹치지 않으므로 건드리지 않는다. */
	#main .sec01 .slide .slick-next {
		right: calc(var(--hk-quick-w) + 20px);
	}
}

/* ---------------------------------------------------------------------
 * 지점 페이지 슬라이더의 다음 버튼이 퀵메뉴와 겹친다 (2026-09-09)
 *
 * 원본 규칙: `#subStoreView .sec_visual .slide .slick-next{right:90px}`
 * 퀵메뉴는 우측 112px 를 쓴다 → 실측 겹침 13px (1440·1920 양쪽에서 동일).
 *
 * ★ 메인(`#main .sec01`)의 같은 보정과 달리 **1424px 미만 구간에는 걸지 않는다.**
 *   그 아래에서는 퀵메뉴가 하단 고정바로 바뀌어 우측을 비우므로 겹칠 일이 없고,
 *   거기까지 밀면 화살표만 근거 없이 안쪽으로 들어간다.
 *
 * !important 를 쓰지 않고 원본과 같은 구체성으로 맞받는다 —
 * 덮어쓰기로 이기면 다음 사람이 원인을 찾지 못한다.
 * ------------------------------------------------------------------- */
@media (min-width: 1425px) {
	#subStoreView .sec_visual .slide .slick-next {
		right: calc(var(--hk-quick-w) + 20px);
	}
}

/* ---------------------------------------------------------------------
 * 푸터 사업자 정보 — 텍스트 병기 (2026-09-08 원장님 지시)
 *
 * 원본은 이 정보를 **이미지 한 장**으로만 냈다. 확대·복사가 안 되고
 * 화면낭독기가 못 읽으며 검색엔진도 가져가지 못한다.
 *
 * 그래서 같은 값을 진짜 텍스트로 함께 넣되, **화면에는 텍스트만 보인다.**
 * 같은 내용을 이미지와 텍스트로 두 번 보여주면 푸터가 두 줄로 겹쳐 보여
 * 고장처럼 읽힌다. 이미지는 DOM 에 남겨 두되 감춘다 —
 * 원본 자산을 지우지 않으면서(되돌리기 쉽다) 표시는 텍스트로 한다.
 *
 * 되돌리려면 이 블록만 지우면 이미지가 다시 보인다.
 * ------------------------------------------------------------------ */
/* 원본이 `.pc_show{display:block !important}` 로 선언해 두어(common.css:389)
 * 같은 무기가 아니면 이길 수 없다. !important 를 쓰는 유일한 자리다. */
#footer .f_contents .btm img.pc_show,
#footer .f_contents .btm img.m_show {
	display: none !important;
}

#footer .f_biz {
	display: block;
	font-style: normal;              /* address 기본 이탤릭 해제 */
	font-size: 14px;
	line-height: 1.9;
	color: #888;
	letter-spacing: -0.03em;
}
#footer .f_biz span {
	display: inline-block;
	margin-right: 18px;
	white-space: nowrap;             /* "TEL. 02-533-1075" 가 중간에서 끊기지 않게 */
}
#footer .f_biz span:last-child { margin-right: 0; }
#footer .f_biz .biz_name { font-weight: 700; color: #666; }
#footer .f_biz a { color: inherit; }
#footer .f_biz a:hover { text-decoration: underline; }

@media (max-width: 990px) {
	#footer .f_biz { font-size: 13px; line-height: 1.8; }
	/* 모바일에서는 항목마다 줄을 바꿔 읽기 쉽게 한다 — 원본 모바일 이미지도 그렇게 되어 있다 */
	#footer .f_biz span { display: block; margin-right: 0; white-space: normal; }
}

/* ---------------------------------------------------------------------
 * 서브 비주얼 슬로건 — 퀵메뉴와 겹침 방지 (2026-09-08)
 *
 * 원본 `#s_visual .slogan_bx{max-width:1200px}` 는 가운데 정렬이라
 * 1440px 화면에서 우측 끝이 1320px 이다. 우측 고정 퀵메뉴가 1337px 부터라
 * **제목("하이키한의원 …")의 오른쪽 끝이 퀵메뉴 밑으로 들어간다**(실측 8개 페이지).
 *
 * 본문 컬럼에 쓴 것과 같은 방식으로 좌우 대칭 축소한다 —
 * 가운데 정렬이 유지되고 배경 이미지는 화면 끝까지 그대로 깔린다.
 * ------------------------------------------------------------------ */
@media (min-width: 1424px) {
	/* `.slogan_bx` 의 max-width 만 줄이는 것으로는 부족했다 — 실측하니 박스가
	 * 가운데가 아니라 오른쪽으로 100px 치우쳐 있어(left 220 / right 1420)
	 * 폭을 줄여도 오른쪽 끝이 퀵메뉴(1337) 밑에 남았다.
	 *
	 * 그래서 `#s_visual` 자체에 오른쪽 여백을 준다. 배경은 `#s_visual` 에 깔리므로
	 * padding 을 줘도 **배경 이미지는 화면 끝까지 그대로** 유지된다 — 안쪽 글자만 물러난다. */
	#s_visual {
		box-sizing: border-box;
		padding-right: var(--hk-quick-w);
	}
	#s_visual .slogan_bx {
		max-width: min(1200px, calc(100vw - var(--hk-quick-w) * 2));
	}
	/* 페이지에 따라 `.slogan_bx` 가 자체 스타일로 오른쪽에 치우쳐 있어(실측 left 164)
	 * 박스 폭만 줄여도 제목이 퀵메뉴 밑으로 남는 경우가 있었다.
	 * 글자가 실제로 놓이는 셀(`.slogan`)에 직접 여백을 줘서 박스 위치와 무관하게 물러나게 한다. */
	#s_visual .slogan {
		box-sizing: border-box;
		padding-right: var(--hk-quick-w);
	}
}

/* ---------------------------------------------------------------------
 * 소아비만클리닉 배포자료 다운로드 (H-21, 2026-09-09)
 *
 * ★ 이 섹션은 **원본에 없다.** 원장님 지시로 다시 붙인 항목이라(원본 clinic04.php 의
 *   download 등장 0회) 원본 인라인 스타일에도 대응 규칙이 없다.
 *   그래서 여기에 둔다 — 원본 CSS 파일에 넣으면 "원본에 있던 것"처럼 보이게 된다.
 *
 * 색·여백은 바로 위에 붙는 `.clinic_store_sec`(원본 인라인 스타일)의 값을 그대로 따랐다.
 * 두 섹션이 잇달아 나오므로 배경만 흰색으로 두어 줄무늬처럼 구분되게 했다.
 * ------------------------------------------------------------------- */
.clinic_dl_sec { background: #fff; padding: 56px 20px 0; }
.clinic_dl_inner { max-width: 980px; margin: 0 auto; text-align: center; }
.clinic_dl_inner .cs_tit { font-size: 26px; font-weight: 800; color: #143a5a; margin: 0 0 26px; line-height: 1.4; }
.clinic_dl_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.clinic_dl_list a {
	display: block; padding: 20px 18px; background: #fff; border: 1px solid #dde5ec;
	border-radius: 8px; text-decoration: none; text-align: left; transition: .2s;
}
.clinic_dl_list a:hover { border-color: #1f5c97; }
.clinic_dl_list strong { display: block; font-size: 17px; font-weight: 700; color: #444; line-height: 1.4; }
.clinic_dl_list span { display: block; margin-top: 6px; font-size: 15px; color: #666; line-height: 1.6; }
.clinic_dl_list em {
	display: inline-block; margin-top: 12px; font-style: normal;
	font-size: 14px; font-weight: 700; color: #1f5c97;
}
.clinic_dl_list a:hover em { text-decoration: underline; }

@media (max-width: 768px) {
	.clinic_dl_sec { padding: 40px 16px 0; }
	.clinic_dl_inner .cs_tit { font-size: 21px; }
	.clinic_dl_list { grid-template-columns: 1fr; gap: 8px; }
	.clinic_dl_list a { padding: 16px 14px; }
	.clinic_dl_list strong { font-size: 16px; }
	.clinic_dl_list span { font-size: 14px; }
}

/* ---------------------------------------------------------------------
 * 예약 지점 선택 · 네이버 예약 안내 (H-15 · H-19, 2026-09-09)
 *
 * ★ 둘 다 원본에 없는 화면이다(카카오 채널이 지점마다 달라 단일 페이지로는
 *   안내가 불가능하다는 것이 H-19 의 요지). 원본 CSS 에 대응 규칙이 없으므로
 *   여기에 둔다 — 원본 파일에 넣으면 "원본에 있던 것"처럼 보이게 된다.
 * 색·여백은 소아비만 배포자료 블록과 같은 값을 써서 사이트 안에서 튀지 않게 했다.
 * ------------------------------------------------------------------- */
.rv_branch_sec, .rv_naver_sec { max-width: 980px; margin: 0 auto 40px; }
.rv_branch_sec .rv_tit, .rv_naver_sec .rv_tit {
	font-size: 24px; font-weight: 800; color: #143a5a; margin: 0 0 10px; line-height: 1.4;
}
.rv_branch_sec .rv_desc, .rv_naver_sec .rv_desc {
	font-size: 15px; color: #666; line-height: 1.7; margin: 0 0 20px;
}
.rv_branch_pick, .rv_branch_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.rv_branch_pick li {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px 16px; background: #fff; border: 1px solid #dde5ec; border-radius: 8px;
}
.rv_branch_pick strong { font-size: 16px; font-weight: 700; color: #444; }
.rvb_actions { display: flex; gap: 8px; flex-shrink: 0; }
.rvb_actions a { padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rvb_go { background: #fff; color: #1f5c97; border: 1px solid #1f5c97; }
.rvb_kakao { background: #fae100; color: #3c1e1e; }
.rv_branch_list a { display: block; padding: 16px 18px; background: #fff; border: 1px solid #dde5ec; border-radius: 8px; text-decoration: none; }
.rv_branch_list a:hover { border-color: #1f5c97; }
.rv_branch_list strong { display: block; font-size: 16px; font-weight: 700; color: #444; }
.rv_branch_list .region { display: block; margin-top: 4px; font-size: 14px; color: #888; }
.rv_branch_list em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 14px; font-weight: 700; color: #1f5c97; }
.rv_naver_etc .rv_branch_list em { color: #888; }

/* 약관 문서 — 본문은 레거시 원문 HTML 이라 최소한의 읽기 여백만 준다 */
#subPolicy .policy_tit { margin: 0 0 10px; padding: 0 0 16px; font-size: 30px; font-weight: 700; color: #1b1b1b; letter-spacing: -0.5px; border-bottom: 2px solid #222; }
#subPolicy .policy_meta { margin: 0 0 26px; font-size: 15px; color: #666; }
#subPolicy .policy_body { font-size: 15px; line-height: 1.8; color: #333; word-break: keep-all; }
#subPolicy .policy_body p { margin: 0 0 10px; }
#subPolicy .policy_ver_form { margin-top: 36px; padding-top: 20px; border-top: 1px solid #e5e5e5; }
#subPolicy .policy_ver_form label { display: block; margin-bottom: 8px; font-size: 14px; color: #666; }
#subPolicy .yg_select { max-width: 100%; padding: 10px 12px; border: 1px solid #dde5ec; border-radius: 6px; font-size: 14px; }

@media (max-width: 768px) {
	.rv_branch_pick, .rv_branch_list { grid-template-columns: 1fr; }
	.rv_branch_pick li { flex-direction: column; align-items: flex-start; }
	.rv_branch_sec .rv_tit, .rv_naver_sec .rv_tit { font-size: 20px; }
	#subPolicy .policy_tit { font-size: 22px; padding-bottom: 12px; }
}


/* 의료진 개별페이지 */
#subStoreView.doctor_page .dr_branch { margin: 0 0 14px; font-size: 15px; }
#subStoreView.doctor_page .dr_branch a { color: #1f5c97; font-weight: 700; text-decoration: none; }
.dr_head { display: flex; gap: 28px; align-items: center; padding: 10px 0 26px; border-bottom: 1px solid #e5eaf0; }
.dr_photo img { width: 220px; height: 260px; object-fit: cover; border-radius: 10px; background: #f2f4f7; }
.dr_name { display: block; font-size: 32px; font-weight: 700; color: #16233a; }
.dr_name span { margin-left: 10px; font-size: 18px; font-weight: 500; color: #1f5c97; }
.dr_short { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: #4b5563; word-break: keep-all; }
.dr_sec { padding: 30px 0; border-bottom: 1px solid #eef1f5; }
.dr_sec > h3 { margin: 0 0 14px; font-size: 22px; font-weight: 700; color: #16233a; }
.dr_txt { font-size: 16px; line-height: 1.85; color: #333; word-break: keep-all; }
.dr_detail_bx { display: flex; gap: 24px; align-items: flex-start; }
.dr_detail_photo img { width: 260px; border-radius: 10px; }
.dr_sns_list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dr_sns_list a { display: inline-block; padding: 9px 16px; border: 1px solid #dde5ec; border-radius: 999px; font-size: 14px; color: #2c3a4e; text-decoration: none; }
.dr_branch_card { display: inline-flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid #dde5ec; border-radius: 10px; text-decoration: none; background: #fff; }
.dr_branch_card strong { font-size: 18px; color: #16233a; }
.dr_branch_tel { font-size: 15px; color: #1f5c97; font-weight: 700; }
.dr_branch_go { font-size: 14px; color: #6b7684; }
.dr_others { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.dr_others a { display: inline-block; padding: 8px 14px; border: 1px solid #dde5ec; border-radius: 999px; font-size: 14px; color: #2c3a4e; text-decoration: none; }

@media (max-width: 768px) {
	.dr_head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.dr_photo img { width: 100%; height: auto; }
	.dr_name { font-size: 24px; }
	.dr_detail_bx { flex-direction: column; }
	.dr_detail_photo img { width: 100%; }
}

/* ---------------------------------------------------------------------
 * 예상키 계산기 (2026-09-14 최종 완성본) — `/growth-clinic/height-estimate`
 *
 * 화면을 새로 짜면서 원본 `clinic0205.php` 의 클래스 이름을 그대로 썼는데,
 * 그 스타일은 원본 페이지 전용 CSS(#subClinic0205 하위)에 있어 신규 사이트에는 없다.
 * 실측(2026-09-14 스크린샷): 기능은 전부 동작하지만 **스타일이 거의 입혀지지 않은 날것**으로 보였다.
 * 그래서 신규 보정 파일인 여기에 레이아웃만 정의한다 — 원본 CSS 는 건드리지 않는다.
 * ------------------------------------------------------------------- */
.calc_con .layout { max-width: 860px; }
.calc_form { margin: 0 0 40px; }
.calc_form fieldset { border: 1px solid #e2e7ec; border-radius: 10px; padding: 22px 24px; margin: 0 0 18px; }
.calc_form legend { padding: 0 10px; font-size: 17px; font-weight: 700; color: #16233a; }
.calc_form .help { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: #6b7684; }
.calc_form .row { display: flex; align-items: center; gap: 12px; padding: 9px 0; flex-wrap: wrap; }
.calc_form .row > label:first-child { flex: 0 0 120px; font-size: 15px; color: #2c3a4e; font-weight: 500; }
.calc_form .row > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calc_form input[type="number"], .calc_form input[type="time"], .calc_form select {
	height: 44px; padding: 0 12px; border: 1px solid #dde5ec; border-radius: 8px;
	font-size: 15px; color: #16233a; background: #fff; min-width: 120px; }
.calc_form input[type="number"]:focus, .calc_form select:focus { outline: 2px solid #9fc4ec; border-color: #9fc4ec; }
.calc_form .row span label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #2c3a4e; }
.calc_form input[type="radio"], .calc_form input[type="checkbox"] { width: 18px; height: 18px; }
.calc_form .radio_bx { gap: 18px; }
.calc_form .btn_calc { display: block; width: 100%; max-width: 360px; margin: 26px auto 0; height: 56px;
	border: 0; border-radius: 10px; background: #1f5c97; color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.calc_form .btn_calc:hover { background: #17497a; }

/* 사춘기 체크리스트 */
.calc_puberty .check_bx { margin: 8px 0 0; padding: 16px 18px; background: #f7f9fa; border-radius: 8px; }
.calc_puberty .check_bx .tit { display: block; font-size: 15px; font-weight: 700; color: #16233a; margin: 0 0 6px; }
.chk_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 10px 0 0; padding: 0; list-style: none; }
/* ★ display 를 주면 브라우저 기본 `[hidden]{display:none}` 을 **우선순위로 이겨버린다**.
 *   2026-09-14 실측: 남아를 골랐는데 여아 목록까지 20개가 다 보였다(hidden=true 인데 display:grid).
 *   숨김이 필요한 자리에 display 를 줄 때는 이 한 줄이 반드시 따라와야 한다. */
.chk_list[hidden] { display: none; }
.chk_list .chk_box { display: flex; align-items: center; gap: 8px; }
.chk_list label { font-size: 14.5px; color: #2c3a4e; cursor: pointer; }

/* 결과 화면 */
.calc_result { border-top: 2px solid #1f5c97; padding: 28px 0 0; }
.calc_result .hk-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.calc_result .hk-num { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px;
	border: 1px solid #dde5ec; border-radius: 12px; background: #f7fafd; }
.calc_result .hk-lbl { font-size: 14px; color: #6b7684; }
.calc_result .hk-val { font-size: 30px; font-weight: 800; color: #1f5c97; line-height: 1.25; }
.calc_result .hk-note { font-size: 13px; line-height: 1.65; color: #6b7684; }
.calc_result .hk-position { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: #16233a; }
.calc_result .hk-answer, .calc_result .hk-interpret, .calc_result .hk-compare,
.calc_result .hk-transition { margin: 0 0 12px; font-size: 15px; line-height: 1.8; color: #333; word-break: keep-all; }
.calc_result .hk-compare { font-weight: 600; color: #1f5c97; }

/* 상황별 맞춤 카드(규칙 기반 매칭) */
.calc_result .hk-seg { margin: 22px 0; padding: 22px 24px; border-radius: 12px; background: #fff6ef; border: 1px solid #f0d9c6; }
.calc_result .hk-seg-title { display: block; font-size: 20px; font-weight: 800; color: #b4571a; margin: 0 0 10px; }
.calc_result .hk-seg-msg { margin: 0 0 14px; font-size: 15px; line-height: 1.85; color: #4a3a2c; word-break: keep-all; }
.calc_result .hk-seg-links { display: flex; flex-wrap: wrap; gap: 8px; }
.calc_result .hk-seg-links a, .calc_result .hk-cta a { display: inline-block; padding: 11px 20px; border-radius: 999px;
	font-size: 14.5px; font-weight: 700; text-decoration: none; }
.calc_result .hk-seg-links a { background: #fff; color: #b4571a; border: 1px solid #e6b894; }
.calc_result .hk-cta { margin: 0 0 18px; }
.calc_result .hk-cta a { background: #1f5c97; color: #fff; padding: 14px 28px; font-size: 16px; }

/* 회원 전용 AI 맞춤가이드 — 규칙 카드 아래에 덧붙는다 */
.calc_result .hk-ai-guide { margin: 0 0 20px; padding: 20px 22px; border-radius: 12px;
	background: #f4f8ff; border: 1px solid #cfe0f7; }
.calc_result .hk-ai-title { display: block; font-size: 16px; font-weight: 800; color: #1f5c97; margin: 0 0 8px; }
.calc_result .hk-ai-msg { margin: 0 0 8px; font-size: 15px; line-height: 1.85; color: #2c3a4e; word-break: keep-all; }
.calc_result .hk-ai-note { margin: 0; font-size: 12.5px; color: #6b7684; }

/* 비회원 회원가입 유도 */
.calc_result .hk-join { margin: 0 0 20px; padding: 18px 22px; border-radius: 12px; background: #f7f9fa;
	border: 1px dashed #c8d3dd; text-align: center; }
.calc_result .hk-join p { margin: 0 0 12px; font-size: 15px; color: #2c3a4e; }
.calc_result .hk-join a { display: inline-block; padding: 11px 24px; border-radius: 999px; background: #fff;
	border: 1px solid #1f5c97; color: #1f5c97; font-size: 14.5px; font-weight: 700; text-decoration: none; }

.calc_result .disclaimer { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: #6b7684; }
.calc_result .saved_note { margin: 0 0 20px; font-size: 13px; color: #b4571a; }

/* 카카오상담 신청 폼 */
.calc_result .hk-consult { margin: 26px 0 0; padding: 24px; border-radius: 12px; background: #fffdf5; border: 1px solid #eee0b5; }
.calc_result .hk-consult-title { display: block; font-size: 18px; font-weight: 800; color: #16233a; margin: 0 0 6px; }
.calc_result .hk-consult-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #6b7684; }
.calc_result .hk-consult-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.calc_result .hk-consult-input { height: 46px; padding: 0 12px; border: 1px solid #dde5ec; border-radius: 8px;
	font-size: 15px; background: #fff; width: 100%; }
.calc_result .hk-consult-consent { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: #2c3a4e; }
.calc_result .hk-consult-consent input { width: 18px; height: 18px; }
.calc_result #cSubmit { display: inline-block; padding: 13px 28px; border: 0; border-radius: 999px;
	background: #f08c2e; color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer; }
.calc_result .hk-consult-result { margin: 10px 0 0; font-size: 14px; color: #6b7684; min-height: 20px; }

/* 맞춤 성장 가이드 받기(선택) — 원장님 확정 2026-10-24.
 * ★예상키 결과·자가진단 결과 **두 화면이 같은 클래스를 쓴다**(문구·모양을 한 곳에서 관리).
 *   그래서 `.calc_result` 안으로 한정하지 않는다 — 자가진단은 `.sec03` 안에 있다. */
.hk-guide { margin: 26px 0 0; padding: 24px; border-radius: 12px; background: #f6fbf8; border: 1px solid #cfe6da; text-align: left; }
.hk-guide-title { display: block; font-size: 18px; font-weight: 800; color: #16233a; margin: 0 0 6px; }
.hk-guide-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #51606f; }
.hk-guide-consent { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #2c3a4e; cursor: pointer; }
.hk-guide-consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.hk-guide-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.hk-guide-input { height: 46px; padding: 0 12px; border: 1px solid #dde5ec; border-radius: 8px; font-size: 15px; background: #fff; width: 100%; }
.hk-guide button { display: inline-block; padding: 13px 28px; border: 0; border-radius: 999px;
	background: #1f8a5f; color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer; }
.hk-guide button[disabled] { background: #9bbfae; cursor: default; }
.hk-guide-result { margin: 10px 0 0; font-size: 14px; color: #1f6f8b; min-height: 20px; }
.hk-guide-join { margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid #dceae2; font-size: 13.5px; line-height: 1.7; color: #6b7684; }
.hk-guide .btnAni { display: inline-block; }

@media (max-width: 768px) {
	.calc_form fieldset { padding: 18px 16px; }
	.calc_form .row { align-items: flex-start; flex-direction: column; gap: 6px; }
	.calc_form .row > label:first-child { flex: none; }
	.calc_form input[type="number"], .calc_form input[type="time"], .calc_form select { width: 100%; min-width: 0; }
	.chk_list { grid-template-columns: 1fr; }
	.calc_result .hk-nums { grid-template-columns: 1fr; }
	.calc_result .hk-consult-row { grid-template-columns: 1fr; }
	.hk-guide { padding: 18px 16px; }
	.hk-guide-row { grid-template-columns: 1fr; }
	.calc_result .hk-val { font-size: 26px; }
}

/* ── 지점 페이지 지도 — 레거시 크기의 절반 (2026-09-15 원장님 지시) ────────
 *
 * 지시서: *"지점페이지 구성 순서는 구홈페이지 지점안내와 동일하게 한다.
 *   단 하나만 예외: 지도는 레거시 크기의 절반으로 줄인다."*
 *
 * 레거시 원본 값(`sub.css`): PC 500px · 모바일(≤1024px) 180px.
 * → 절반: PC 250px · 모바일 90px.
 *
 * ★ `sub.css` 를 직접 고치지 않는다. 그 파일은 원본에서 가져온 것이고
 *   손대면 다음에 원본과 대조할 때 무엇이 우리 변경인지 구별되지 않는다
 *   (`docs/original-fidelity.md`). 덧씌우기는 항상 이 파일에서 한다.
 * ★ 카카오 roughmap 은 컨테이너 높이에 맞춰 스스로 다시 그린다 —
 *   세 선택자(컨테이너·.map·.wrap_map)를 함께 줄여야 빈 여백이 남지 않는다. */
#subStoreView .sec_map .root_daum_roughmap { height: 250px; }
#subStoreView .sec_map .map { height: 250px; }
#subStoreView .sec_map .root_daum_roughmap .wrap_map { height: 250px; }

@media (max-width: 1024px) {
	#subStoreView .sec_map .root_daum_roughmap { height: 90px; }
	#subStoreView .sec_map .map { height: 90px; }
	#subStoreView .sec_map .root_daum_roughmap .wrap_map { height: 90px; }
}

/* ── 지점 페이지: 의료진 상세이력 링크 (2026-09-15) ──────────────────
 *
 * 레거시에 없던 링크라 레거시 버튼 클래스(btnAni)를 빌려 쓰지 않는다 —
 * 그 클래스의 호버 장식(::before 400×400 원)이 이 자리에서는 부모에 가려지지 않아
 * 거대한 파란 원이 진료분야 영역을 덮었다(실측). 필요한 모양만 직접 준다. */
#subStoreView .sec_dc .dc_more {
	display: inline-block;
	margin-top: 18px;
	padding: 11px 22px;
	border: 1px solid #0071bb;
	border-radius: 4px;
	color: #0071bb;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-decoration: none;
}
#subStoreView .sec_dc .dc_more:hover { background: #0071bb; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   지점 페이지 재작업 (2026-09-16) — 지시서 확정사항 3·4 반영

   ★ 왜 여기에 쓰는가: 레거시는 이 규칙들을 **지점 PHP 파일마다 인라인 <style> 로**
     박아 두었다(파일당 3~5개, 심지어 </html> 뒤에도 있었다). 그래서 같은 규칙이
     10곳에 복제돼 서로 어긋났다. 신규는 한 곳에만 둔다.

   ★ 헤딩 계층을 지시서대로 고쳤기 때문에(h1 = 지점명 하나, 나머지 h2) 원본 CSS 가
     전제하던 태그와 달라진 자리가 있다. 원본 CSS 를 고치지 않고 여기서 같은 모양을 준다:
       · .sec_contact  원본은 h2.store_tit  → 신규는 h1.store_tit (지점명이 h1)
       · .bx05         원본은 strong.tit    → 신규는 h2.tit
       · .dr_sec       원본은 > h3          → 신규는 > h2
   ══════════════════════════════════════════════════════════════════ */

/* 지점명 h1 — 원본 h2.store_tit 과 같은 모양 */
#subStoreView .sec_contact h1.store_tit { display:block; margin:0 0 30px; font-size:38px; line-height:48px; color:#333; letter-spacing:-0.05em; font-weight:400; font-family:'NanumSquareRound', sans-serif; }
#subStoreView .sec_contact h1.store_tit strong { font-weight:800; }

/* 유튜브·신문기사 제목 h2 — 원본 strong.tit 과 같은 모양 */
#subStoreView .sec_dc .bx05 > div h2.tit { display:block; margin:0 0 20px; font-size:28px; line-height:38px; color:#454545; letter-spacing:-0.05em; font-weight:800; text-align:center; font-family:'NanumSquareRound', sans-serif; }

/* 의료진 페이지 섹션 제목 h2 — 원본 .dr_sec > h3 과 같은 모양 */
.dr_sec > h2 { margin:0 0 14px; font-size:22px; font-weight:700; color:#16233a; }

/* 운영주체 안내문 — 레거시가 인라인 style 로만 갖고 있던 블록 */
#subStoreView .store_biz_note { margin:0; padding:14px 20px; background:#f4f7fa; border-bottom:1px solid #e5ebf1; font-size:15px; line-height:24px; color:#41566f; text-align:center; letter-spacing:-0.03em; word-break:keep-all; }
#subStoreView .store_biz_note strong { font-weight:700; color:#1f5c97; }

/* 진료시간 — 레거시가 지점 파일마다 인라인으로 갖고 있던 .time 목록 */
#subStoreView .sec_dc ul.time { margin:0 0 20px; padding:0; list-style:none; border-top:1px solid #e4e4e4; }
#subStoreView .sec_dc ul.time > li { display:flex; align-items:center; gap:18px; padding:12px 6px; border-bottom:1px solid #e4e4e4; font-size:18px; line-height:28px; color:#454545; letter-spacing:-0.05em; }
#subStoreView .sec_dc ul.time > li > div:first-child { flex:0 0 96px; display:flex; justify-content:space-between; font-weight:600; color:#333; }
#subStoreView .sec_dc ul.time > li > div:first-child p { margin:0; }
#subStoreView .sec_dc ul.time > li > div:last-child { flex:1 1 auto; word-break:keep-all; }
#subStoreView .sec_dc ul.time b { font-weight:700; }
#subStoreView .sec_dc ul.time b.off { color:#d63b3b; }

/* 진료시간 요일표 */
#subStoreView .sec_dc .scrollbox { overflow-x:auto; }
#subStoreView .sec_dc table.time_tb { width:100%; min-width:520px; border-collapse:collapse; border-top:2px solid #454545; }
#subStoreView .sec_dc table.time_tb caption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
#subStoreView .sec_dc table.time_tb th,
#subStoreView .sec_dc table.time_tb td { padding:12px 6px; border-bottom:1px solid #e4e4e4; border-left:1px solid #eee; text-align:center; font-size:16px; line-height:24px; color:#454545; }
#subStoreView .sec_dc table.time_tb th:first-child,
#subStoreView .sec_dc table.time_tb td:first-child { border-left:0; }
#subStoreView .sec_dc table.time_tb thead th { background:#f7f9fb; font-weight:700; color:#333; }
#subStoreView .sec_dc table.time_tb tbody th { background:#fafbfc; font-weight:600; }
#subStoreView .sec_dc table.time_tb .o { color:#1f5c97; font-weight:700; }
#subStoreView .sec_dc table.time_tb .x { color:#aab2bd; }

/* 의료진 블록의 "자세히 보기" 링크 */
#subStoreView .sec_dc .bx01 .right p.more { margin-top:18px; }
#subStoreView .sec_dc .bx01 .right p.more a { display:inline-block; padding:9px 18px; border:1px solid #1f5c97; border-radius:999px; font-size:16px; color:#1f5c97; text-decoration:none; font-weight:600; }
#subStoreView .sec_dc .bx01 .right p.more a:hover { background:#1f5c97; color:#fff; }

/* ── 확정사항 4: 지도 좌 · 오시는 길 안내 우, 좌우 2단 ─────────────────
   높이 절반 축소(500px → 250px)는 위쪽 규칙에 이미 있다. 여기서는 배치만 잡는다.
   지도 key 가 없는 지점은 .map_left 가 아예 렌더되지 않으므로, 그때는 안내가 전체 폭을 쓴다. */
#subStoreView .sec_map .map_wrap { display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; margin-top:30px; }
#subStoreView .sec_map .map_wrap .map_left { flex:1 1 46%; min-width:0; }
#subStoreView .sec_map .map_wrap .map_right { flex:1 1 46%; min-width:0; }
#subStoreView .sec_map .map_wrap .map_left:only-child,
#subStoreView .sec_map .map_wrap .map_right:only-child { flex-basis:100%; }
/* 2단 안에서는 교통안내 행 높이를 줄인다 — 원본은 한 행이 165px 로 한 화면을 다 먹었다 */
#subStoreView .sec_map .map_wrap .info_bx dl { height:auto; display:flex; align-items:flex-start; gap:14px; padding:16px 0; }
#subStoreView .sec_map .map_wrap .info_bx dl dt { display:block; flex:0 0 96px; width:auto; }
#subStoreView .sec_map .map_wrap .info_bx dl dt span { padding-top:52px; font-size:16px; line-height:24px; background-size:36px auto !important; }
#subStoreView .sec_map .map_wrap .info_bx dl dd { display:block; flex:1 1 auto; padding:0; font-size:16px; line-height:26px; }
#subStoreView .sec_map .map_wrap .btnWrap { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
#subStoreView .sec_map .map_wrap .btnWrap a { display:inline-block; padding:10px 18px; border:1px solid #dde5ec; border-radius:6px; font-size:15px; color:#2c3a4e; text-decoration:none; background:#fff; }
#subStoreView .sec_map .map_wrap .btnWrap a:hover { border-color:#1f5c97; color:#1f5c97; }

@media (max-width:1024px) {
	#subStoreView .sec_contact h1.store_tit { font-size:26px; line-height:36px; }
	#subStoreView .sec_dc .bx05 > div h2.tit { font-size:20px; line-height:30px; }
	#subStoreView .sec_dc ul.time > li { font-size:15px; line-height:24px; gap:10px; }
	#subStoreView .sec_dc ul.time > li > div:first-child { flex-basis:72px; }
	#subStoreView .sec_map .map_wrap { gap:20px; margin-top:20px; }
	#subStoreView .sec_map .map_wrap .map_left,
	#subStoreView .sec_map .map_wrap .map_right { flex-basis:100%; }
	#subStoreView .store_biz_note { font-size:14px; line-height:22px; padding:12px 14px; }
}

/* 지점 목록 — 지역 그룹 버튼에 전화번호를 함께 낸다(레거시는 지점명만 냈다) */
#subStore .store_list > li { margin-bottom:34px; }
#subStore .store_list > li > strong { display:block; margin-bottom:14px; font-size:22px; font-weight:700; color:#16233a; }
#subStore .store_list > li > ul { display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; list-style:none; }
#subStore .store_list > li > ul > li > a { display:flex; flex-direction:column; gap:4px; min-width:170px; padding:16px 20px; border:1px solid #dde5ec; border-radius:10px; background:#fff; text-decoration:none; }
#subStore .store_list > li > ul > li > a span { font-size:18px; font-weight:700; color:#16233a; }
#subStore .store_list > li > ul > li > a em { font-style:normal; font-size:15px; color:#1f5c97; font-weight:600; }
#subStore .store_list > li > ul > li > a:hover { border-color:#1f5c97; }
#subStore .store_guide { margin-top:20px; padding:26px 0 60px; border-top:1px solid #eef1f5; }
#subStore .store_guide h2 { margin:0 0 10px; font-size:22px; font-weight:700; color:#16233a; }
#subStore .store_guide p { margin:0; font-size:17px; line-height:28px; color:#454545; word-break:keep-all; }
#subStore .store_guide .btn_bx { display:flex; gap:12px; margin-top:18px; }

/* 지점 목록 — 예약·문의 버튼. 원본 .btn01/.btn02 는 지점 상세(.sec_contact) 안에서만
   스타일이 걸려 있어, 목록 페이지에서는 맨 글자로 보였다(2026-09-16 스크린샷으로 확인). */
#subStore .store_guide .btn_bx a { display:inline-block; min-width:150px; padding:14px 26px; border-radius:6px; font-size:17px; font-weight:700; text-align:center; text-decoration:none; box-sizing:border-box; }
#subStore .store_guide .btn_bx a.btn01 { background:#1f5c97; color:#fff; }
#subStore .store_guide .btn_bx a.btn02 { background:#fff; color:#1f5c97; border:1px solid #1f5c97; }
#subStore .store_guide .btn_bx a:hover { opacity:.9; }

/* 연락 블록 — 예약·문의 버튼 제거(2026-09-16 원장님 결정 B: 우측 고정 퀵메뉴와 중복).
   원본 CSS 는 우측 버튼 자리 150px 를 전제로 좌측을 calc(100% - 150px) 로 잡아 두었다.
   버튼을 걷어냈으므로 그 폭을 돌려준다 — 안 그러면 오른쪽에 빈 칸이 그대로 남는다. */
#subStoreView .sec_contact .bx > div.left { width:100%; }

/* ══════════════════════════════════════════════════════════════════════
   지점 목록 — 레거시(kor/store/index.php) 재현 보정 (2026-09-16 원장님 지시)

   ★ 값은 레거시 CSS·인라인 style 에서 **실측한 그대로**다:
       sub.css       #subStore .bx { border:10px solid #ececec; }
       index.php     #subStore .bx { padding:20px 0; }
                     #subStore .bx > div.right { padding:40px 30px; }   (모바일 30px 20px)
                     산문 블록 { margin:56px auto 0; max-width:900px; text-align:left; }
                     소제목 { font-size:21px; color:#1a1a1a; margin:34px 0 12px; font-weight:700; }
                     본문   { font-size:16px; line-height:1.85; color:#444; margin:0 0 14px; }
                     목록   { padding-left:20px; font-size:16px; line-height:1.9; color:#444; }
     레거시는 `.bx`(테두리) 안에 `.right`(안쪽 여백)가 겹쳐 있어 실제 안쪽 여백이
     상하 20+40=60px · 좌우 30px 다. 신규는 감싸는 요소가 하나(ul.store_list)라 합산해 준다.
   ══════════════════════════════════════════════════════════════════ */

/* 지역 버튼 전체를 감싸는 박스 — 옅은 회색 액자 + 흰 바탕 */
#subStore .store_list { margin:40px 0 0; padding:60px 30px; border:10px solid #ececec; background:#fff; box-sizing:border-box; }
#subStore .store_list > li:last-child { margin-bottom:0; }

/* 산문 블록(방문 안내 · FAQ) — 레거시와 같은 폭·여백 */
#subStore .store_prose { margin:56px auto 0; max-width:900px; text-align:left; }
#subStore .store_prose h2 { display:block; margin:34px 0 12px; font-size:21px; line-height:1.4; color:#1a1a1a; font-weight:700; }
#subStore .store_prose p { margin:0 0 14px; font-size:16px; line-height:1.85; color:#444; word-break:keep-all; }
#subStore .store_prose .guide_list { margin:0 0 14px; padding-left:20px; list-style:disc; color:#444; font-size:16px; line-height:1.9; }
#subStore .store_prose .guide_list li { list-style:disc; }
#subStore .store_prose .faq_item b { color:#1a1a1a; font-weight:700; }
#subStore .store_prose .btn_bx { display:flex; gap:12px; margin:18px 0 0; }

@media (max-width:1024px) {
	#subStore .store_list { border-width:5px; padding:35px 20px; }
}
@media (max-width:768px) {
	#subStore .store_list { padding:30px 20px; }
	#subStore .store_prose { margin-top:34px; }
	#subStore .store_prose h2 { font-size:18px; margin:24px 0 10px; }
	#subStore .store_prose p,
	#subStore .store_prose .guide_list { font-size:15px; line-height:1.8; }
}


/* 하이키 스타 방문기 — 한 줄 5개 × 2줄로 고정 (2026-09-16, grid 방식) */
#main .sec06 .pc_list_bx ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
#main .sec06 .pc_list_bx ul li { width: auto; min-width: 0; }

/* 서브 배너 제목의 "하이키한의원" 부분만 절반 크기로 (2026-09-16 원장님 지시) */
#s_visual .slogan .txt2 .sub_brand { font-size: 23px; display: block; margin-bottom: 4px; }

/* 서브 배너 "하이키한의원" 글자 크기 절반 (2026-09-16, 재수정)
 * 이전 시도(#s_visual .slogan .txt2 .sub_brand)는 구조를 잘못 짐작한 것이었다 —
 * 실측(growth-clinic 페이지) 결과 실제 구조는 .txt2 없이 h5 바로 아래에 있다:
 *   #s_visual .slogan h5 .sub_brand
 * 부모 h5 자체가 font-65(65px)라 sub_brand 도 그 크기를 그대로 물려받고 있었다. */
#s_visual .slogan .sub_brand { font-size: 33px; display: block; margin-bottom: 4px; }

/* "하이키한의원 성장클리닉" 한 줄 유지 (2026-09-16 재수정)
 * 앞서 넣은 규칙에 display:block 이 있어 오히려 줄이 나뉘었다 — 그 규칙보다
 * 나중에 로드되도록 여기 다시 써서 display 만 inline으로 되돌린다. */
#s_visual .slogan .sub_brand { display: inline; margin-bottom: 0; margin-right: 6px; }

/* ─────────────────────────────────────────────────────────────
 * 예상키 계산(height-estimate) — 레거시 clinic0205.php 좌우 2단 레이아웃 재현
 * (2026-09-18 원장님 지시: 구홈페이지처럼 좌측 사진 고정 + 우측 폼)
 *
 * 레거시 규칙(sub.css:680~684)을 그대로 옮긴다. display:table 방식이라
 * 좌측 이미지 칸의 높이가 우측 폼 내용에 맞춰 자동으로 늘어난다.
 * ───────────────────────────────────────────────────────────── */
/* ★ 2026-09-18 재설계 — display:table 방식을 버린다.
 * 예상키 폼은 항목이 많아(나이~동의까지) 높이가 1500~2000px 를 넘는다.
 * table-cell 은 형제 칸 높이를 강제로 맞추므로, 좌측 이미지가 그 긴 높이만큼
 * 억지로 늘어나 "비정상적으로 긴 배너"처럼 보였다(2026-09-18 실측).
 * flex + sticky 로 바꿔 이미지는 적당한 높이로 고정하고, 스크롤해도 화면에 따라오게 한다. */
.hk-calc-wrap{display:flex;align-items:flex-start;gap:0;width:100%;border:1px solid #e1e1e1;box-sizing:border-box;margin-bottom:40px;overflow:hidden;}
.hk-calc-wrap .hk-calc-img{flex:0 0 40%;box-sizing:border-box;position:sticky;top:20px;align-self:flex-start;border-right:1px solid #e1e1e1;}
.hk-calc-wrap .hk-calc-img img{width:100%;height:auto;display:block;}
.hk-calc-wrap .hk-calc-form{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:40px 5%;}

@media (max-width:768px){
	.hk-calc-wrap{display:block;}
	.hk-calc-wrap .hk-calc-img{display:block;position:static;width:100%;}
	.hk-calc-wrap .hk-calc-img img{width:100%;height:auto;max-height:320px;display:block;}
	.hk-calc-wrap .hk-calc-form{display:block;padding:24px 16px;}
}

/* 예상키 계산 — 생활습관 라디오 4열 정렬 (2026-09-18 원장님 지시) */
.calc_form .radio_grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 16px;width:100%;}
.calc_form .radio_grid4 label{display:flex;align-items:center;gap:6px;font-size:15px;color:#2c3a4e;white-space:nowrap;}
@media (max-width:768px){
	.calc_form .radio_grid4{grid-template-columns:repeat(2,1fr);}
}

/* ─────────────────────────────────────────────────────────────
 * (삭제) 하이키 스타 방문기 목록 PC 2열 — `.bbs_list.celeb2col` 4줄
 *        2026-10-02 에 넣었고 2026-10-07 원장님 지시로 지웠다.
 *
 * 왜 지웠나: 그 규칙이 걸리던 `.bbs_list` 라는 class 자체가 사라졌다.
 *   2026-10-07 에 게시판 목록을 **레거시 마크업**으로 되돌리면서(원장님 결정 ②)
 *   목록 wrapper 가 `.board_S01` · `.board_S02` · `.board_S03` 이 됐다.
 *   레거시 stars 는 평범한 `.board_S02`(= PC 4열, board.css:130)이고, 2열은
 *   **우리가 덧입힌 것**이었다. "레거시가 정답"에 맞춰 레거시 열 수를 따른다.
 *   → 선택자가 아무것도 가리키지 않는 죽은 CSS 였으므로 남겨 둘 이유가 없다.
 *
 * 되살릴 일이 있으면: `.board_S02` 에 celebrity 전용 class 를 더해 거는 쪽이 맞다.
 *   `.bbs_list` 는 더 이상 어떤 화면도 내보내지 않는다(전수 0건, 2026-10-07 실측).
 * ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
 * 게시판 검색 버튼 (2026-10-07, ③)
 *
 * 레거시 마크업은 `<a href="#" id="btn_search">` 이고 jQuery 가 submit 을 걸었다
 * (`bbs_skin/default/glist.php:25` + `:35-50`). 우리는 `<button type="submit">` 으로 바꿨다 —
 * 스크립트를 못 받아도 눌리고, 키보드로도 되고, 스크린리더가 버튼으로 읽는다.
 *
 * ★그런데 `board.css:219` 의 버튼 규칙은 **`#b_sch div p a`** 라서 `<button>` 에 안 걸린다.
 *   그 결과 버튼이 **0×0 이 되어 아예 누를 수 없었다**(2026-10-07 실측 — HTML 로는 멀쩡해 보이고
 *   **렌더로만 잡힌다**. `getBoundingClientRect()` 가 w=0 h=0 을 돌려줬다).
 *   `#b_sch div p` 가 `font-size:0` 이라 내용으로도 크기가 생기지 않는다.
 *
 * → `board.css`(레거시와 바이트 동일한 파일)는 건드리지 않고, 여기서 **같은 치수**를 준다.
 *   값은 board.css:219(PC)·513(모바일)에서 그대로 옮긴 것이다. 분기점도 그 파일이 쓰는 1024px.
 * ───────────────────────────────────────────────────────────── */
#b_sch div p button.btn_sch {
	display: inline-block; vertical-align: top; width: 58px; height: 48px;
	padding: 0; border: 0; cursor: pointer;
	background: url('../images/btn/btn_sch.png') no-repeat center;
	text-indent: -99999px; overflow: hidden;
}
@media all and (max-width:1024px) {
	#b_sch div p button.btn_sch {
		width: 34px; height: 38px;
		background: url('../images/btn/btn_sch_m.png') no-repeat center;
		background-size: 14px auto;
	}
}

/* ─────────────────────────────────────────────────────────────
 * 의료진 카드 사진 — 데스크톱 **가로 스크롤**을 만들던 결함 (2026-10-09, [5]-1)
 *
 * ## 무엇이 잘못돼 있었나 (실측)
 * 레거시는 사진을 `<img>` 로 그리지 않는다. `board.css:287` 이 그 증거다:
 *     #board .dc_list02 > li .img_bx{ padding-bottom:79%; background-size:cover !important; }
 * 즉 `.img_bx` 자체가 **비율 상자 + 배경이미지(cover)** 이고 그 안에 자식이 없다
 * (레거시 렌더 11곳 전수: <div class="img_bx" style="background:url('/data/staffData/….jpg')">).
 *
 * 우리는 `templates/lists.js` 의 staffList 가 그 상자 **안에 `<img>` 를 넣었다.**
 * 그래서 위 레거시 규칙이 **반만 듣는다** — 비율 상자는 생기는데 `<img>` 가 갇히지 않는다.
 * 1200px 실측: 상자는 313px 인데 사진이 자연 치수로 그려져
 *   10장(500x380) 이 +187px 씩, 송창규(3790x5306) 가 **+3477px** 넘쳤고
 *   문서폭이 **4233 / 보이는 폭 1200** — 즉 **데스크톱에서 가로 스크롤이 생겼다**(1440px 에서도 4353).
 * ★이 결함이 그동안 안 잡힌 이유: 그냥 열면 lazy 라 사진을 안 불러와 넘침이 0 으로 나온다.
 *   **스크롤해서 lazy 를 깨운 뒤**에야 4353 이 나온다(인수인계 §6④ 와 같은 함정).
 *
 * ## 왜 배경이미지로 되돌리지 않았나
 * 레거시대로 `<img>` 를 지우고 배경이미지로 바꾸면 **alt 11개가 사라진다.**
 * 마크업 충실이 기능 후퇴가 되면 안 된다(인수인계 §4 — 검색 버튼을 `<a>` 대신 `<button>` 으로 둔 것과 같은 판단).
 * → `<img>` 는 그대로 두고, **보이는 모양만 레거시와 같게** 만든다: 79% 비율 상자를 cover 로 채운다.
 *
 * ★`board.css` 는 건드리지 않는다(레거시와 바이트 동일한 파일이다). 여기서만 덮는다.
 * 쓰는 화면은 `/growth-research` **한 곳뿐**이다(공개 75화면 렌더 전수 확인).
 * ───────────────────────────────────────────────────────────── */
#board .dc_list02 > li .img_bx {
	position: relative;
	overflow: hidden;
}
#board .dc_list02 > li .img_bx img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: top center;   /* 레거시 inline style 의 `no-repeat top center` 와 같은 기준점 */
}

/* ─────────────────────────────────────────────────────────────
 * 의료진 카드 **글자가 안 보이던 것** (2026-10-09, [5]-1 에서 캡처로 드러남)
 *
 * ## 무엇이 잘못돼 있었나 (실측)
 * `/growth-research` 의 의료진 11명 **이름·직책·지점·약력이 화면에 하나도 안 보였다.**
 * DOM 에는 다 있다 — `font-size: 0px · line-height: 0px · 높이 0px` 으로 그려지고 있었다.
 * 원인: 레거시 `board.css:285` 가 `#board .dc_list02{ font-size:0; }` 로 inline-block 사이 공백을
 * 죽이고, **글자 크기를 `.info_bx dt strong`·`dd` 에서 다시 살린다**(board.css:289-292).
 * 우리는 그 자리에 `.info_bx > dl > dt/dd` 가 아니라 `.txt_bx > .name/.position/.store/.profile` 를
 * 썼기 때문에 **되살리는 규칙이 하나도 걸리지 않았다.**
 * ★HTML 로는 멀쩡해 보인다. **캡처로만 잡힌다** — 레거시 화면과 나란히 찍어서 드러났다.
 *
 * ## 값은 전부 레거시에서 그대로 옮긴 것이다
 *   PC(기본)        board.css:288-292   strong 22/32 #454545 500 · span 16/32 #0071bb · dd 18/30 #666
 *   max-width:1024  board.css:564-568   strong 16/21 · span 13/21 · dd 14/20 · info_bx margin-top 16
 *   max-width:768   board.css:600-604   같은 값 · dt margin-bottom 12
 * `dt` 의 `padding-bottom:15px + margin-bottom:11px + border-bottom` 은 우리 마크업에 dt 가 없어
 * **`.profile` 의 위쪽**으로 옮겨 같은 모양을 만든다(이름줄 아래 15px → 선 → 11px → 약력).
 *
 * ★`board.css` 는 건드리지 않는다. 여기서만 덮는다.
 * ★남은 차이 하나: 레거시는 이름 옆이 "강남본원 / 대표원장"(지점 → 직책) 순서이고
 *   우리 마크업은 직책 → 지점 순서다. **순서는 바꾸지 않았다** — 마크업·내용 결정이라 보고한다.
 * ───────────────────────────────────────────────────────────── */
#board .dc_list02 > li .txt_bx { margin-top: 23px; }
#board .dc_list02 > li .txt_bx .name {
	font-size: 22px; line-height: 32px; color: #454545; letter-spacing: -0.05em; font-weight: 500;
}
#board .dc_list02 > li .txt_bx .position,
#board .dc_list02 > li .txt_bx .store {
	font-size: 16px; line-height: 32px; color: #0071bb; letter-spacing: -0.05em;
}
/* 레거시 span 은 **하나**이고 거기에 padding-left:10px 이 붙는다(board.css:291).
 * 우리는 지점·직책을 두 조각으로 들고 있으므로 **앞 조각에만** 그 여백을 준다 —
 * 둘 다 주면 이름과의 간격이 두 배가 된다. */
#board .dc_list02 > li .txt_bx .store { padding-left: 10px; }
#board .dc_list02 > li .txt_bx .store + .position { padding-left: 0; }
#board .dc_list02 > li .txt_bx .profile {
	margin-top: 15px; padding-top: 11px; border-top: 1px solid #e7e7e7;
	font-size: 18px; line-height: 30px; color: #666; letter-spacing: -0.05em;
	/* ★약력이 **한 문단으로 이어붙던 것** — 레거시는 항목마다 한 줄이다.
	 *   원인: 우리 `branch_staff.profile_html` 은 `<br>` 이 **0개**이고(12행 전수)
	 *   줄바꿈 문자(\r\n)로만 들어 있다. HTML 은 줄바꿈을 공백으로 접으므로 한 줄이 된다.
	 *   레거시 원문에는 `<br />` 이 있었다(intro01.php 렌더 확인) — 이관 때 글자만 남은 것이다.
	 *   → **DB 를 고치지 않는다.** 글자는 그대로 두고 그리는 방법만 바꾼다(되돌리기도 쉽다). */
	white-space: pre-line;
}
@media all and (max-width: 1024px) {
	#board .dc_list02 > li .txt_bx { margin-top: 16px; }
	#board .dc_list02 > li .txt_bx .name { font-size: 16px; line-height: 21px; }
	#board .dc_list02 > li .txt_bx .position,
	#board .dc_list02 > li .txt_bx .store { font-size: 13px; line-height: 21px; }
	#board .dc_list02 > li .txt_bx .profile { margin-top: 10px; padding-top: 10px; font-size: 14px; line-height: 20px; }
}
@media all and (max-width: 768px) {
	#board .dc_list02 > li .txt_bx .profile { padding-top: 12px; }
}

/* ─────────────────────────────────────────────────────────────
 * width·height 속성을 넣어도 **표시 치수가 바뀌지 않게** 하는 받침 (2026-10-09, [5]-3)
 *
 * 왜 필요한가: 이 사이트에는 전역 `img { height: auto }` 가 **없다.**
 *   `#sub .contents img{ max-width:100%; height:auto; }`(common.css:750)는
 *   **@media (max-width:1024px) 안**이라 데스크톱에는 걸리지 않는다.
 *   그 상태에서 `height="400"` 같은 속성을 넣으면, 폭이 줄어도 높이가 400 에 묶여 **그림이 찌그러진다.**
 *
 * 그래서 **내가 속성을 넣은 이미지에만** height:auto 를 건다 —
 *   `img[width][height]` 는 두 속성이 **둘 다 있을 때만** 맞는다. 전역 `img` 를 건드리지 않는다.
 *   특정도(0,2,1)가 클래스 규칙(0,1,0 이상)보다 낮거나 비슷해, 일부러 높이를 정한 기존 규칙은 그대로 이긴다
 *   (예: 높이를 못으로 박은 기존 클래스 규칙은 그대로 이긴다).
 *
 * 속성을 넣는 이유는 **자리 밀림(레이아웃 시프트)** 때문이다 — 브라우저가 내려받기 전에
 * 가로세로비를 알아 자리를 미리 잡는다. 보이는 치수는 그대로다(전·후 전수 대조로 확인한다).
 * ───────────────────────────────────────────────────────────── */
img[width][height] { height: auto; }

/* ─────────────────────────────────────────────────────────────
 * `.font-25` — **변환 때 빠진 유틸 클래스** (2026-10-09, [6])
 *
 * ## 무엇이 잘못돼 있었나 (390px 실측)
 * 서브 비주얼 배너의 문구가 우리 화면에서 **10px** 로 그려졌다. 레거시 같은 자리는 **16px** 다.
 *     우리:   <p class="font-25 pretendard"> → 10px · 조상 사슬도 전부 10px
 *     레거시: 같은 요소 → 16px · 조상 14px
 * 원인은 글자 크기 설정이 아니라 **정의가 없는 것**이었다 —
 * `.font-25` 는 우리 CSS 어디에도 **0건**이라 그냥 상속만 받고 있었다
 * (`sub_new.css:100` 이 `@media (max-width:768px){html,body{font-size:10px}}` 라 상속값이 10px 이다).
 *
 * 레거시는 그 정의를 **페이지 안 인라인 style** 에 갖고 있고, 그 블록이 변환 때 넘어오지 않았다.
 * 레거시 원문(center/paper.php · case/case02.php 두 화면에서 글자까지 같음):
 *     .font-25 { font-size: 1.5625rem; }                     (root 16px → **25px**)
 *     @media (max-width:990px) { .font-25 { font-size: 1rem; } }   (root 16px → **16px**)
 *
 * ## 왜 rem 이 아니라 px 로 적나
 * 레거시는 root 가 **16px 고정**이고(그 화면들은 sub_new.css 를 안 부른다),
 * 우리는 root 가 폭에 따라 16·14·13·11·10px 로 바뀐다.
 * 그래서 `1.5625rem` 을 **글자 그대로 옮기면 폭마다 다른 값**이 되어 레거시와 어긋난다.
 * 레거시가 실제로 그리는 **결과 px** 를 그대로 재현하는 쪽을 골랐다 —
 * 경계(990px)도 레거시 것을 그대로 쓴다.
 *
 * ★사용처를 먼저 셌다: `font-NN` 11종 중 **정의가 없는 것은 `.font-25` 하나뿐**이고
 *   쓰는 자리는 `templates/sub.js` 의 서브 비주얼 배너다(모든 서브 화면이 이것을 쓴다).
 * ───────────────────────────────────────────────────────────── */
.font-25 { font-size: 25px; }
@media (max-width: 990px) {
	.font-25 { font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────
 * 전체메뉴(PC)의 **챗봇 한 줄** (2026-10-15 원장님 지시)
 *
 * 레거시 전체메뉴에는 ul.sns_list 안에 챗봇이 있었다(kor/inc/header.php:387).
 * 우리 전체메뉴에는 그 SNS 줄 자체가 없어서 그대로 옮길 자리가 없었다.
 *
 * ★#all_gnb 안에 칸으로 넣지 않는 이유: 그 목록은 `display:table; table-layout:fixed`
 *   라서 칸을 하나 더 넣으면 **대메뉴 열 너비가 전부 틀어진다**(원본 common.css:146-147).
 *   그래서 표 **밖에** 한 줄로 둔다.
 * ★원본 css 는 바이트 그대로 둬야 한다(scripts/checks/original_assets_intact.sh)
 *   — 그래서 이 파일에 적는다.
 * ★휴대폰에서 열리는 것은 전체메뉴가 아니라 모바일 메뉴라서, 그쪽은 메뉴 목록 안에
 *   `li.dep02_none` 한 줄로 넣었다(원본 클래스를 그대로 쓴다 — 새 CSS 가 필요 없다).
 * ───────────────────────────────────────────────────────────── */
#header .all_menu_bx .hk_menu_chat {
	border-top: 1px solid #e5e5e5;
	background: #f5f5f5;
}
#header .all_menu_bx .hk_menu_chat > a {
	display: block;
	padding: 16px 30px;
	font-size: 16px;
	line-height: 24px;
	color: #0071bb;
	font-weight: 700;
	letter-spacing: -0.05em;
	font-family: 'NanumSquareRound', sans-serif;
}
#header .all_menu_bx .hk_menu_chat > a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
 * 메인 하이키TV BEST 영상 — **썸네일 먼저, 누르면 재생** (2026-10-17 원장님 지시 3)
 *
 * 전에는 iframe 을 바로 심어서 **화면을 열기만 해도 유튜브가 붙었다.**
 * 원본 main.css:123-124 가 .video_bx 를 16:9 상자로 잡고 그 안의 iframe 을 꽉 채운다 —
 * 그 자리에 버튼을 **같은 규칙으로** 끼운다(원본 CSS 는 건드리지 않는다).
 * ★누르면 버튼이 iframe 으로 바뀌므로 재생 뒤 모양은 전과 똑같다.
 * ───────────────────────────────────────────────────────────── */
#main .sec04 .bx_wrap > div.left .video_bx .hk_yt_play {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	display: block;
	overflow: hidden;
}
#main .sec04 .bx_wrap > div.left .video_bx .hk_yt_play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 가운데 재생 삼각형 — 그림 파일을 더하지 않고 CSS 로 그린다 */
#main .sec04 .bx_wrap > div.left .video_bx .hk_yt_play__btn {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	border-radius: 12px;
	background: rgba(0, 0, 0, .66);
	transition: background .2s;
}
#main .sec04 .bx_wrap > div.left .video_bx .hk_yt_play__btn:after {
	content: '';
	position: absolute;
	left: 27px;
	top: 14px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}
#main .sec04 .bx_wrap > div.left .video_bx .hk_yt_play:hover .hk_yt_play__btn,
#main .sec04 .bx_wrap > div.left .video_bx .hk_yt_play:focus .hk_yt_play__btn {
	background: #e62117;
}