@charset "utf-8";

/* ==========================================================================
   메인 페이지 전용 (www/index.jsp)
   - headHtml.jsp 가 이 파일을 전 페이지에 로드하므로,
     반드시 #main_page 하위로 스코프를 고정해 다른 페이지에 영향이 없게 한다.
   - 디자인 토큰(--hs-*)은 /css/custom.css 에 정의되어 있다.
   ========================================================================== */

html, body{overflow-x:clip;}
#main_page{font-family:var(--hs-sans); color:var(--hs-body); background:#fff;}
#main_page section{position:relative;}
#main_page .inner{width:100%; max-width:1400px; margin:0 auto; padding:0 20px; box-sizing:border-box;}

/* 스크롤 등장 (과하지 않은 폭: 24px 이동 + 페이드) */
#main_page .reveal{opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);}
#main_page .reveal.is_in{opacity:1; transform:none;}
#main_page .reveal.d1{transition-delay:.12s;}
#main_page .reveal.d2{transition-delay:.24s;}
#main_page .reveal.d3{transition-delay:.36s;}

/* --------------------------------------------------------------------------
   1. 메인 비주얼
   -------------------------------------------------------------------------- */
/* [이전 버전 - 되돌릴 때 아래 3줄을 살리고 현재 3줄을 지운다] 전면 사진 배경 + 좌측 흰 베일
#main_page .hero{display:flex; align-items:center; height:calc(100vh - var(--hs-header-h)); min-height:720px; max-height:1109px; overflow:hidden; background:#f2f6f4;}
#main_page .hero_bg{position:absolute; inset:0; background:url('/img/main_hero.webp') no-repeat center center / cover; transform:scale(1.04); opacity:0; transition:opacity 1.6s ease, transform 2.4s cubic-bezier(.22,.61,.36,1);}
#main_page .hero_veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(250,251,249,.72) 0%, rgba(250,251,249,.42) 42%, rgba(250,251,249,.12) 72%, rgba(250,251,249,0) 100%);}
*/
/* [이전 버전 - 수채 꽃 뒷배경(main_hero_bg) + 오른쪽 인물 일러스트(main_hero_02_fade). 되돌릴 때 아래 2줄을 살리고 현재 2줄을 지운다]
#main_page .hero{display:flex; align-items:center; height:calc(100vh - var(--hs-header-h)); min-height:720px; max-height:1109px; overflow:hidden; background:url('/img/main_hero_bg.webp') no-repeat left bottom / cover, linear-gradient(180deg,#fff 0%,#f8fbf9 100%);}
#main_page .hero_bg{position:absolute; inset:0; background:url('/img/main_hero_02_fade.webp') no-repeat 75% bottom / auto 88%; transform:scale(1.04); opacity:0; transition:opacity 1.6s ease, transform 2.4s cubic-bezier(.22,.61,.36,1);}
*/
/* [이전 버전 - 밝은 수채화 배경 한 장(main_bg.webp) + 흰 베일. 되돌릴 때 아래 6줄을 살리고
   현재 "풀스크린 배경 슬라이드" 규칙 전체를 지운다. index.jsp 의 section.hero 마크업과
   custom.css 의 "메인 전용 - 헤더 오버레이" 블록도 함께 되돌릴 것]
#main_page .hero{display:flex; align-items:center; height:calc(100vh - var(--hs-header-h)); min-height:720px; max-height:1109px; overflow:hidden; background:#fff;}
#main_page .hero_bg{position:absolute; inset:0; background:url('/img/main_bg.webp') no-repeat center center / cover; transform:scale(1.04); opacity:0; transition:opacity 1.6s ease, transform 2.4s cubic-bezier(.22,.61,.36,1);}
#main_page .hero.is_ready .hero_bg{opacity:1; transform:scale(1);}
#main_page .hero_veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.3) 35%, rgba(255,255,255,0) 60%);}
*/

/* 흰 바탕 히어로 + 문구 한가운데에서 번지는 어둠 (2026-09-07 개편, sendpotion.com 참고).
   히어로는 사진 없이 흰 바탕에 문구만 놓이고, 스크롤하면 그 문구 한가운데에서 어둠(.hero_sky)이
   원형으로 커져 화면을 덮은 뒤 별과 별똥별이 흐른다.

   [이전 버전 - 풀스크린 사진 슬라이드(켄번스 5장) + 히어로가 거꾸로 원형으로 오므라들던 연출.
    되돌릴 때 index.jsp 의 슬라이드 마크업·슬라이드 스크립트와 함께
    아래 .hero_stage / .hero_slide / @keyframes hsKen* / .hero_veil / .hero_nav / .hero_dot 을 살리고,
    .hero 의 background 를 #0b110f 로 되돌린 뒤 clip-path:circle(78% at 50% 50%) 를 다시 붙일 것.
    그때는 히어로 자신이 잘려 나갔으므로 .hero_sky 는 clip-path 대신 opacity 로만 나타났다]

   화면 구성은 두 단계다.
     ① .hero        - 첫 화면. 흰 바탕의 브랜드 인트로(스크롤 없이 그대로 보인다)
     ② .quote_wrap  - 대표원장 어록. 스크롤해 들어오면 문구가 붓처럼 그려지고,
                      더 내리면 그 문구 한가운데에서 어둠이 원형으로 번져 화면을 덮는다.
   quote_wrap 은 그 인터랙션에 쓰는 스크롤 통으로 화면보다 210vh 길다. 그 여유분을 스크롤하는 동안
   어둠이 번지고 → 별이 돋고 → 다시 걷힌다. 구간 경계는 index.jsp 의 A·D·C 가 이 길이를 비율로 나눠 쓴다
   - 한쪽만 고치면 어긋난다.
   배경은 다음 섹션(.hero_gallery)과 이어지는 한지 톤 단색 - 두 요소에 같은 한지 이미지를 깔면
   높이가 달라 cover 크롭이 어긋나 경계에 선이 생기므로, 이음새는 .hero_gallery 위쪽의
   같은 색 그라디언트가 녹인다.
   높이에 dvh 를 쓰면 모바일에서 주소창이 접힐 때마다 통 길이가 변해 스크롤이 튄다 - 여유분은 vh 로 고정한다.
   sticky 는 basic.css 의 `html,body{overflow-x:hidden}` 아래에서는 동작하지 않지만,
   이 파일 10행의 `overflow-x:clip` 이 그것을 덮어써서(clip 은 스크롤 컨테이너를 만들지 않는다) 정상 동작한다. */

/* ① 첫 화면 - 흰 바탕 브랜드 인트로
   [제거 2026-09-08 - 항노화 진료 사진을 전면 배경으로 깔던 상태(하루 만에 되돌림).
    다시 넣을 때는 아래 background 를 살리고 현재 한 줄을 지운 뒤, 이어지는 "문구 자리 가독성" 블록의
    주석도 함께 풀고, index.jsp draw() 의 헤더 판정에 heroBehind 를 되살릴 것.
    ⚠ 원본이 900×800 이라 넓은 화면에서는 1.8 배 가까이 늘어난다 - 큰 원본을 먼저 준비할 것
   #main_page .hero{display:flex; align-items:center; height:100vh; min-height:560px;
   	background:#fff url('/img/main/contents_img_01.webp') no-repeat center center / cover;} */
/* 흰 바탕에 어록만 놓이는 첫 화면.
   [제거 2026-09-08 - 수채화 꽃 장식(main_hero_bg_02.png)을 화면 위에 딱 붙여 걸고,
    들어올 때 크게 들어왔다가 제자리로 줄어들게 하던 상태. 되살릴 때 아래 주석을 통째로 풀고
    현재 .hero 규칙의 overflow:hidden 을 다시 붙일 것(확대된 그림이 가로 스크롤을 만든다).
   #main_page .hero{... overflow:hidden; ...}
   #main_page .hero:before{content:''; position:absolute; left:0; top:0; z-index:1; width:100%; aspect-ratio:2816/1536;
   	background:url('/img/main_hero_bg_02.png') no-repeat center top / 100% auto;
   	transform-origin:50% 0; transform:scale(1.16); opacity:0;
   	transition:transform 1.9s cubic-bezier(.16,.72,.3,1), opacity 1.1s ease;}
   #main_page .hero.is_ready:before{transform:scale(1); opacity:1;}
   @media (prefers-reduced-motion: reduce){ #main_page .hero:before{transform:none; opacity:1; transition:none;} }
   - transform-origin 을 위쪽(50% 0)에 둔 것이 핵심이었다: 줄어드는 내내 그림 윗변이 화면 맨 위에 붙어 있다.
   - 좁은 화면에서도 가로 100% 그대로 두어야 했다 - 꽃이 그림 좌우 가장자리에 몰려 있어
     크게 잡으면 화면 밖으로 잘려 나가고 텅 빈 가운데만 남는다. ] */
/* 첫 화면 - 진료 사진 풀스크린 슬라이드 (2026-09-08)
   [이전 - 수채화 풍경 그림 한 장(main_hero_bg_03.png)을 바닥에 깔던 상태. 되살릴 때 아래 두 줄을 쓰고
    슬라이드 관련 규칙(.hero_stage / .hero_slide / .hero_veil / .hero_ctrl)을 지울 것
   #main_page .hero{display:flex; align-items:center; height:100vh; min-height:560px;
   	background:#fff url('/img/main_hero_bg_03.png') no-repeat center calc(100% + 7vw) / 100% auto;} ]
   배경색은 사진이 뜨기 전의 바탕이자, 사진 사이가 비칠 때의 색이다.
   [개편 2026-09-14] 화면을 꽉 채우지 않는다 - 높이를 화면에서 한 뼘 덜어 내 아래에 흰 여백을 둔다(원장님 지시).
     밝은 장이 있어 바탕색도 흰색으로. 높이는 아래 svh 규칙이 다시 정한다.
     이전 버전 전체는 _backup_20260914_hero/main.css 참고.
   [이전 값] height:100vh; min-height:560px; background:#0d1218; */
#main_page .hero{display:flex; align-items:center; height:calc(100vh - clamp(110px, 16vh, 200px)); min-height:540px;
	overflow:hidden; background:#fff;}
#main_page .hero_stage{position:absolute; inset:0; z-index:0;}
/* 사진 한 장 - 겹쳐 두고 보이는 장에만 is_on 을 붙인다(스크립트).
   transform 으로 아주 느리게 확대해 정지 사진에 미세한 움직임을 준다(켄번스).
   전환은 opacity 로만 - 두 장이 잠깐 겹치며 부드럽게 바뀐다. */
#main_page .hero_slide{position:absolute; inset:0; background-repeat:no-repeat; background-size:cover;
	opacity:0; transform:scale(1.08); transition:opacity 1.4s ease, transform 9s linear;}
#main_page .hero_slide.is_on{opacity:1; transform:scale(1);}
/* 사진을 눌러 흰 글자가 읽히게 하는 베일.
   [변경 2026-09-09] 아래쪽 끝을 흰색으로 풀어 다음 섹션과 이어 붙이던 처리를 걷어냈다 -
   사진 아랫부분이 회색 → 흰색으로 덮여 첫 화면이 잘려 보였다. 이제 사진은 화면 끝까지 온전히 보이고
   다음 섹션(흰 바탕)과는 경계가 그대로 드러난다.
   [되돌릴 때 - 아래 background 를 이 값으로 바꾼다]
   background:linear-gradient(180deg, rgba(9,13,20,.62) 0%, rgba(9,13,20,.4) 32%, rgba(9,13,20,.5) 60%,
   	rgba(9,13,20,.72) 78%, rgba(60,64,70,.86) 88%, rgba(190,192,196,.94) 95%, #fff 100%);
   지금 값은 글자가 놓인 가운데를 가장 옅게 두고 위아래만 살짝 눌러, 사진 자체를 최대한 남긴다.
   (아래쪽은 조작 버튼·SCROLL 표시가 읽힐 만큼만 어둡게) */
#main_page .hero_veil{position:absolute; inset:0; z-index:1;
	background:linear-gradient(180deg, rgba(9,13,20,.5) 0%, rgba(9,13,20,.28) 34%, rgba(9,13,20,.3) 62%,
		rgba(9,13,20,.44) 100%);}
/* 문구를 왼쪽으로 붙인 장(index.jsp 의 .hero_chapter 에 붙인 is_left)에서는 그 왼쪽만 한 겹 더 누른다.
   글자가 놓인 자리만 어두워지고 오른쪽 사진은 밝게 남아, 사진을 해치지 않으면서 글이 읽힌다.
   위 세로 베일은 그대로 두고 그 위에 가로 그라디언트를 겹친다(먼저 쓴 것이 위층). */
#main_page .hero.is_left_slide .hero_veil{
	background:linear-gradient(90deg, rgba(9,13,20,.5) 0%, rgba(9,13,20,.34) 30%, rgba(9,13,20,.1) 55%, rgba(9,13,20,0) 72%),
		linear-gradient(180deg, rgba(9,13,20,.5) 0%, rgba(9,13,20,.28) 34%, rgba(9,13,20,.3) 62%, rgba(9,13,20,.44) 100%);}
/* 오른쪽에 문구를 둔 장은 반대로 오른쪽을 누른다(위 규칙을 좌우로 뒤집은 것) */
#main_page .hero.is_right_slide .hero_veil{
	background:linear-gradient(270deg, rgba(9,13,20,.5) 0%, rgba(9,13,20,.34) 30%, rgba(9,13,20,.1) 55%, rgba(9,13,20,0) 72%),
		linear-gradient(180deg, rgba(9,13,20,.5) 0%, rgba(9,13,20,.28) 34%, rgba(9,13,20,.3) 62%, rgba(9,13,20,.44) 100%);}
/* 마지막 장(책상 위 동의보감, 2026-09-11)은 펼친 책의 흰 종이가 화면 한가운데를 밝게 채워
   그 위에 놓이는 흰 글자가 묻힌다 - 이 장에서만 베일 전체를 한 겹 더 눌러 사진을 어둡게 한다.
   (스크립트가 .hero 에 is_last_slide 를 붙인다. 가운데도 다른 장보다 짙게 두되, 위에 얹히는
   햇살(.hero_sun)이 사진 위에서 살아나도록 완전히 덮지는 않는다) */
#main_page .hero.is_last_slide .hero_veil{
	background:linear-gradient(180deg, rgba(9,13,20,.74) 0%, rgba(9,13,20,.66) 34%, rgba(9,13,20,.68) 62%,
		rgba(9,13,20,.76) 100%);}
/* 밝은 사진 장(2026-09-14, 스크립트가 .hero 에 is_light 를 붙인다) - 베일을 걷는다. 수채화·밝은 벽 위에
   어두운 베일을 씌우면 사진이 탁해지고, 그 위 흰 글자보다 어두운 글자가 훨씬 잘 읽힌다.
   ⚠ is_left_slide / is_right_slide 규칙보다 뒤에 두어야 이긴다(같은 우선순위라 순서가 결정한다). */
#main_page .hero.is_light .hero_veil{background:none;}
/* [제거 2026-09-14] 마지막 장의 햇살(.hero_sun, three.js) */
#main_page .hero .inner{position:relative; z-index:2;}

/* 브랜드 문구 - 가운데 정렬. 라벨은 테두리 상자에 넣어 제목과 층을 나눈다 */
#main_page .hero_intro{max-width:1040px; margin:0 auto; text-align:center;}
#main_page .hero_intro .label{display:inline-block; margin-bottom:28px; padding:9px 22px;
	border:1px solid rgba(255,255,255,.5); font-family:var(--hs-sans); font-size:14px; font-weight:500;
	letter-spacing:2.6px; line-height:1; color:#fff;}
#main_page .hero_intro h1{font-family:var(--hs-serif); font-size:clamp(34px, 4.6vw, 72px); font-weight:600;
	line-height:1.34; letter-spacing:-1px; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.4); word-break:keep-all;}
#main_page .hero_intro p{margin-top:22px; font-size:clamp(15px, 1.2vw, 19px); font-weight:300; line-height:1.7;
	color:rgba(255,255,255,.84); text-shadow:0 1px 14px rgba(0,0,0,.35); word-break:keep-all;}
/* 사진이 바뀔 때마다 문구도 함께 살짝 떠오른다(스크립트가 is_in 을 다시 붙인다) */
#main_page .hero_intro > *{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
#main_page .hero.is_ready .hero_intro > *{opacity:1; transform:none;}
#main_page .hero.is_ready .hero_intro h1{transition-delay:.14s;}
#main_page .hero.is_ready .hero_intro p{transition-delay:.28s;}

/* ── 첫 화면 이야기 (2026-09-09) ──────────────────────────────────────
   사진 한 장에 이야기 한 대목. 여섯 장이 같은 자리에 겹쳐 있고 지금 장(.is_on)만 보인다.
   장이 바뀔 때마다 시점(연도) → 제목 첫 줄 → 둘째 줄 → 설명 순으로 차례차례 떠오른다 -
   한꺼번에 나타나면 여섯 장이 그저 갈아 끼워지는 것처럼 보이고, 순서가 있어야 이야기로 읽힌다.
   ⚠ 등장 조건에 .hero.is_ready 가 붙어 있다 - 스크립트가 장을 넘길 때 이 클래스를 뗐다 붙여
     전이를 처음부터 다시 걸기 때문이다(index.jsp 의 show()). 조건을 빼면 장이 바뀌어도 다시 뜨지 않는다.
   높이는 min-height 로 잡아 둔다 - 장마다 글 길이가 달라, 잡아 두지 않으면 넘어갈 때마다
   문구 덩어리가 위아래로 흔들린다. */
#main_page .hero_story{position:relative; max-width:1100px; min-height:clamp(240px, 32vh, 360px);
	margin:0 auto; text-align:center;}
/* 장이 넘어갈 때 - 지난 대목은 위로 흘러가며 사라지고, 다음 대목은 아래에서 떠오른다.
   한 방향으로 흐르게 두는 것이 핵심이다. 제자리에서 갈아 끼우면 여섯 장이 따로 놀지만,
   같은 방향으로 지나가면 하나의 이야기가 계속 이어지는 것처럼 읽힌다. */
#main_page .hero_chapter{position:absolute; left:0; top:50%; display:flex; flex-direction:column;
	align-items:center; width:100%; transform:translateY(calc(-50% - 26px));
	opacity:0; visibility:hidden;
	transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1), visibility 0s linear .8s;}
#main_page .hero_chapter.is_on{opacity:1; visibility:visible; transform:translateY(-50%);
	transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);}

/* ⚠ 속 요소들의 등장은 transition 이 아니라 animation 이다. 이유가 있다 -
   장을 넘길 때 스크립트는 .is_ready 를 뗐다 곧바로 다시 붙이는데(index.jsp 의 show()),
   transition 으로 짜면 "시작 자리로 되돌아가는 전이"와 "다시 나타나는 전이"가 한 프레임에
   맞물려 서로를 지워 버린다(글자가 그냥 완성된 채로 툭 나타난다. 실제로 그렇게 동작했다).
   animation 은 규칙이 새로 매치되는 순간 - 즉 .is_on 이 다른 장으로 옮겨 붙는 순간 -
   처음부터 다시 재생되므로 이런 맞물림이 없다.
   그래서 정적인 기본 상태는 "다 그려진 모습"으로 두었다. 스크립트가 없거나 애니메이션을 끈
   환경에서도 글자가 그대로 읽히고, 지나가는 장도 완성된 모습 그대로 흘러간다. */
@keyframes hcRise{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@keyframes hcLine{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
/* 제목이 붓처럼 그려지는 움직임 - 요소보다 세 배 넓은 그라디언트 마스크를 씌우고 그 위치만 옮긴다.
   가려진 자리(100% 0)에서 드러난 자리(0 0)로 미끄러지면 글자가 획을 따라 나타나는 것처럼 보인다.
   (사이트에 이미 있던 어록 연출과 같은 기법 - main.css 의 .hero_copy h1 .ln 참고)
   ⚠ 마스크 폭(300%)과 그라디언트의 두 정지점(33.3% / 66.6%)은 짝이다 - 한쪽만 바꾸면
     글자가 다 드러나기 전에 멈추거나, 처음부터 반쯤 보인 채로 시작한다. */
@keyframes hcWipe{
	from{opacity:0; transform:translateY(12px); -webkit-mask-position:100% 0; mask-position:100% 0;}
	to{opacity:1; transform:none; -webkit-mask-position:0 0; mask-position:0 0;}
}

/* 시점 - 연도·기간처럼 이야기의 매듭이 되는 한마디.
   [변경 2026-09-10] 양옆의 가는 선을 걷어내고 글자를 키웠다. 선이 붙어 있으면 글자가 그 사이에
   끼인 꼬리표처럼 읽혀, 한마디로 서지 못하고 제목의 곁다리가 된다.
   선을 없앴으므로 display 도 flex 에서 block 으로 돌린다 - flex 는 선을 나란히 놓으려던 것이었고,
   block 이라야 부모(.hero_chapter)의 text-align 을 그대로 따라 좌·우·가운데 정렬이 맞는다.
   자간은 함께 줄인다 - 글자가 커진 만큼 3px 을 그대로 두면 낱글자가 흩어져 한 덩어리로 읽히지 않는다.
   [이전 값] display:flex; align-items:center; gap:14px; font-size:14px; letter-spacing:3px;
             + :before/:after 로 양옆에 40px 짜리 선 */
#main_page .hc_era{display:block; margin-bottom:26px;
	font-family:var(--hs-sans); font-size:clamp(17px, 1.45vw, 24px); font-weight:500;
	letter-spacing:1.8px; line-height:1.2; color:#e3cfa6;}
/* [크기 조정 2026-09-21] clamp(36px, 4.7vw, 78px) → 한 단계 줄였다(원장님 지시 - 첫 화면 글자가 너무 크다).
   78px 은 1600px 넘는 화면에서 두 줄 제목이 사진을 반쯤 덮어 버린다. 상한을 58px 로 눌러 사진이 먼저 보이게 한다.
   [이전 값 2026-09-14] clamp(36px, 4.7vw, 78px)  [그 전] clamp(32px, 4.4vw, 68px) */
/* [크기 조정 2026-09-23] 살짝 키웠다(원장님 지시). [이전 값 2026-09-21] clamp(32px, 3.6vw, 58px) */
/* [크기 조정 2026-10-01] 모든 화면에서 2px 키웠다. [이전 값] clamp(34px, 3.9vw, 64px) */
/* [크기 조정 2026-10-02] 히어로 글자 전부 2px 더 키웠다. [이전 값] clamp(36px, calc(3.9vw + 2px), 66px) */
#main_page .hc_title{font-family:var(--hs-serif); font-size:clamp(38px, calc(3.9vw + 4px), 68px); font-weight:600;
	line-height:1.32; letter-spacing:-1px; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45); word-break:keep-all;}
/* 제목 안의 연도·연차(2026-09-14, index.jsp 의 .hero_story 마크업에서 <em class="hc_num"> 으로 감싼다).
   [변경 2026-09-21] 숫자를 제목과 같은 크기·굵기로 맞췄다(원장님 지시 - 숫자가 너무 크다, 다른 글자와 똑같이).
   색만 남겨 연도임을 표시한다. hc_big 은 한 줄을 통째로 차지하는 표시(display:block)로만 남는다.
   [이전 값] hc_num font-size:1.22em; font-weight:700; / hc_big font-size:1.85em; padding:.06em 0 .04em;
   금색은 어두운 사진 위의 값이고, 밝은 장은 아래 .hero.is_light 규칙이 쪽빛(#1b3a5c)으로 뒤집는다. */
#main_page .hc_num{font-style:normal; font-weight:inherit; font-size:1em; line-height:inherit; letter-spacing:inherit; color:#e3cfa6;
	margin-right:.02em;}
#main_page .hc_num.hc_big{display:block; margin:0; padding:0;}
#main_page .hc_title .ln{display:block;
	-webkit-mask-image:linear-gradient(90deg, #000 33.3%, rgba(0,0,0,0) 66.6%);
	mask-image:linear-gradient(90deg, #000 33.3%, rgba(0,0,0,0) 66.6%);
	-webkit-mask-size:300% 100%; mask-size:300% 100%;
	-webkit-mask-position:0 0; mask-position:0 0;}
/* 장에 따라 문구를 왼쪽으로 붙인다(index.jsp 의 .hero_chapter 에 is_left 를 붙인 장).
   사진마다 비워 둘 자리가 달라, 인물이나 사물이 가운데 있는 장은 옆으로 비켜 주는 편이 낫다.
   좌우 여백은 .hero_story 의 폭(max-width)이 이미 잡고 있으므로 정렬만 바꾸면 된다. */
#main_page .hero_chapter.is_left{align-items:flex-start; text-align:left;}
#main_page .hero_chapter.is_left .hc_era{margin-left:0;}
#main_page .hero_chapter.is_left .hc_desc{padding-left:0;}
#main_page .hero_chapter.is_right{align-items:flex-end; text-align:right;}
#main_page .hero_chapter.is_right .hc_era{margin-right:0;}
#main_page .hero_chapter.is_right .hc_desc{padding-right:0;}
/* [추가 2026-09-23] 덩어리는 오른쪽에 붙이되 줄끼리는 가운데로 맞춘다(index.jsp 의 .hero_chapter "is_right is_rc").
   align-items:flex-end 로 덩어리 폭이 가장 긴 줄에 맞춰 줄어들므로, 그 안에서 text-align:center 면
   짧은 줄("11년")이 긴 줄의 가운데 아래에 선다 - 원장님 지시 "문자 가운데 줄 맞춤". */
#main_page .hero_chapter.is_rc{text-align:center;}
/* 설명은 폭을 묶어 둔다 - 화면 끝까지 늘어나면 글줄이 길어져 한눈에 들어오지 않는다
   [크기 조정 2026-09-23] clamp(15px, 1.2vw, 19px) → 한 단계 반 키웠다(원장님 지시 - "광고 없이" 장 서브텍스트를 크게).
   설명이 있는 장은 지금 그 한 장뿐이다. 글자가 커진 만큼 폭 상한도 660 → 780px 로 넓혀 한 줄에 담는다. */
/* [크기 조정 2026-10-02] 2px 키웠다. [이전 값] clamp(18px, 1.6vw, 26px) */
#main_page .hc_desc{max-width:780px; margin-top:26px; padding:0 20px; box-sizing:border-box;
	font-size:clamp(20px, calc(1.6vw + 2px), 28px); font-weight:400; line-height:1.65;
	color:rgba(255,255,255,.84); text-shadow:0 1px 14px rgba(0,0,0,.4); word-break:keep-all;}
/* [2026-09-30] 3장 "32년이 넘는 묵묵한 진료"만 한 단계 키운다 - 제목(.hc_title, 34~64px)보다는 작게 둔다 */
/* [수정 2026-10-01] 글씨체를 4장 설명("홍보 광고 없이 …")과 같은 고딕(Noto Sans KR)으로 맞췄다 - 크기는 그대로.
   h1.hc_title 안에 있어 명조체·자간 -1px 을 물려받고 있었다. [이전 값] font-family·letter-spacing 지정 없음(상속) */
/* [크기 조정 2026-10-02] 2px 키웠다. [이전 값] clamp(24px, 2.6vw, 42px) */
#main_page .hc_desc.hc_desc_lg{font-family:var(--hs-sans); letter-spacing:normal; font-size:clamp(26px, calc(2.6vw + 2px), 44px); line-height:1.5;}
/* [2026-10-01] 모바일(640px 이하)에서만 줄을 바꾸는 <br class="mo_br" /> - PC 에서는 숨긴다 */
#main_page .hc_title .mo_br{display:none;}

/* 떠오르는 순서 - 시점 → 제목 첫 줄 → 둘째 줄 → 설명. 지연 간격이 곧 이야기의 호흡이다.
   지금 장(.is_on)에만 걸므로, .is_on 이 옮겨 붙을 때마다 그 장에서 처음부터 재생된다. */
#main_page .hero_chapter.is_on .hc_era{animation:hcRise .9s cubic-bezier(.22,.61,.36,1) .06s both;}
/* [제거 2026-09-10] 양옆 선이 좌우로 그어지던 움직임(hcLine). 선 자체를 걷어내며 함께 뺐다.
   되돌릴 때 위 .hc_era 의 이전 값 주석을 살리고 아래 두 줄도 함께 되살릴 것
   (@keyframes hcLine 은 그대로 남아 있다).
#main_page .hero_chapter.is_on .hc_era:before,
#main_page .hero_chapter.is_on .hc_era:after{animation:hcLine .9s cubic-bezier(.22,.61,.36,1) .26s both;}
*/
#main_page .hero_chapter.is_on .hc_title .ln:nth-child(1){animation:hcWipe 1.15s cubic-bezier(.33,.68,.32,1) .20s both;}
#main_page .hero_chapter.is_on .hc_title .ln:nth-child(2){animation:hcWipe 1.15s cubic-bezier(.33,.68,.32,1) .34s both;}
#main_page .hero_chapter.is_on .hc_desc{animation:hcRise .9s cubic-bezier(.22,.61,.36,1) .52s both;}
/* 서명 - 마지막 장에서만 함께 떠오른다(스크립트가 .hero_story 에 is_last 를 붙인다).
   문구 덩어리 아래에 두되 자리를 차지하지 않게 절대배치한다 - 그래야 장마다 문구 위치가 흔들리지 않는다.
   여기서는 기본이 "숨김"이다 - 다른 장에서는 보이면 안 되기 때문이다. */
/* [크기 조정 2026-09-14] 15px / strong 17px → 두 단계 키웠다(원장님 지시). 커진 만큼 아래로 더 내린다(bottom -40 → -64px)
   [크기 조정 2026-09-21] 제목을 줄이면서 서명도 한 단계 내렸다 - 제목보다 서명이 무거워 보이면 안 된다.
   [이전 값] font-size:clamp(17px, 1.4vw, 22px) / strong clamp(24px, 2vw, 32px) / bottom:-64px */
/* [크기 조정 2026-09-23] 다시 키웠다(원장님 지시 - 마지막 장 "대표원장 왕충조" 크게). 제목(최대 58px)보다는 가볍게,
   이름이 제목 바로 다음으로 읽히는 크기. 커진 만큼 아래로 더 내린다(bottom -56 → -76px).
   [이전 값 2026-09-21] font-size:clamp(15px, 1.15vw, 18px) / strong clamp(19px, 1.5vw, 24px) / bottom:-56px */
/* [크기 조정 2026-10-02] 2px 키웠다. [이전 값] font-size:clamp(17px, 1.4vw, 22px) / strong clamp(26px, 2.3vw, 38px) */
#main_page .hero_sign_l{position:absolute; left:0; bottom:-76px; width:100%;
	font-family:var(--hs-sans); font-size:clamp(19px, calc(1.4vw + 2px), 24px); font-weight:400; letter-spacing:.6px; color:rgba(255,255,255,.85);
	opacity:0;}
#main_page .hero_sign_l strong{margin-left:12px; font-family:var(--hs-serif); font-size:clamp(28px, calc(2.3vw + 2px), 40px); font-weight:600; letter-spacing:1px; color:#fff;}
#main_page .hero_story.is_last .hero_sign_l{animation:hcRise .9s cubic-bezier(.22,.61,.36,1) .72s both;}

/* 슬라이드 조작 - 화면 아래 가운데. board.css 등 레거시 button 규칙이 새어 들지 않도록 값을 모두 명시한다
   [개편 2026-09-23] 원장님 지시 - 세련되게. 테두리 원 버튼 셋 + 번호가 따로 놀던 구성을
   반투명 유리 캡슐 하나로 묶었다:  01 ━━━ 05 │ ‹  ‖  ›
   - 번호를 앞(order:-1)으로, 두 자리(01)·명조로 - 편집물의 쪽 번호처럼 읽힌다
   - 막대는 "몇 번째 장인가"가 아니라 "이 장이 얼마나 남았나"를 보여 준다 - 머무는 시간(HOLD) 동안
     왼쪽부터 차오르고 다 차면 다음 장으로 넘어간다(스크립트가 .is_tick 을 다시 붙여 처음부터 재생)
   - 버튼은 테두리 없이 아이콘만, 올리면 둥근 바탕이 옅게 깔린다
   - 색은 변수로 묶어 밝은 장(is_light)에서 변수만 뒤집는다
   [이전 값] 44px 원 버튼(border 1px rgba(255,255,255,.4)) 셋 + 오른쪽 번호, 막대는 --p 로 장 위치를 표시 */
#main_page .hero_ctrl{--cf:#fff; --cm:rgba(255,255,255,.55); --ct:rgba(255,255,255,.22); --cbar:#e3cfa6; --chov:rgba(255,255,255,.14);
	position:absolute; left:50%; bottom:48px; z-index:3; display:flex; align-items:center; gap:2px;
	padding:5px; border-radius:999px; transform:translateX(-50%);
	background:rgba(14,18,17,.26); border:1px solid rgba(255,255,255,.16);
	-webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%);
	box-shadow:0 10px 30px rgba(0,0,0,.14);
	transition:background-color .6s ease, border-color .6s ease;}
#main_page .hero_ctrl button{position:relative; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin:0;
	border:0; border-radius:50%; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; outline:none;
	transition:background-color .3s ease;}
#main_page .hero_ctrl button:hover{background:var(--chov);}
/* 마우스로 누른 뒤 남던 굵은 초점 테두리를 없애고, 키보드로 옮겨 왔을 때만 얇은 고리를 보인다 */
#main_page .hero_ctrl button:focus-visible{box-shadow:0 0 0 1.5px var(--cf);}
/* 화살표는 테두리 두 변을 돌려 만든다 - 아이콘 파일 없이 선 굵기를 맞추기 쉽다 */
#main_page .hc_prev i,
#main_page .hc_next i{display:block; width:8px; height:8px; border-top:1.5px solid var(--cf); border-right:1.5px solid var(--cf);
	transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .6s ease;}
#main_page .hc_prev i{transform:rotate(-135deg); margin-left:3px;}
#main_page .hc_next i{transform:rotate(45deg); margin-right:3px;}
/* 올리면 화살표가 가리키는 쪽으로 한 뼘 밀린다 */
#main_page .hc_prev:hover i{transform:translateX(-2px) rotate(-135deg);}
#main_page .hc_next:hover i{transform:translateX(2px) rotate(45deg);}
/* 가운데 버튼 - 재생 중에는 멈춤(‖), 멈춰 있으면 재생(▶) 모양이 된다 */
#main_page .hc_play i{display:block; position:relative; width:10px; height:10px;}
#main_page .hc_play.is_playing i{width:9px; box-sizing:border-box; border-left:2px solid var(--cf); border-right:2px solid var(--cf);}
#main_page .hc_play:not(.is_playing) i{width:0; height:0; margin-left:3px;
	border-left:9px solid var(--cf); border-top:5.5px solid transparent; border-bottom:5.5px solid transparent;}
/* 번호 - 현재 장 / 전체. 캡슐 맨 앞에 두고 오른쪽 가는 세로선으로 버튼과 가른다 */
#main_page .hero_count{order:-1; display:flex; align-items:center; gap:12px; height:28px; margin:0 8px 0 0; padding:0 18px 0 16px;
	border-right:1px solid var(--ct);
	font-family:var(--hs-serif); font-size:13px; letter-spacing:.5px; color:var(--cm);}
#main_page .hero_count em{min-width:1.3em; font-style:normal; font-size:16px; font-weight:600; color:var(--cf);}
#main_page .hero_count b{font-weight:400;}
/* 머무는 시간 막대 - 이 장이 넘어가기까지 남은 시간이 왼쪽부터 차오른다.
   --hold 는 스크립트의 HOLD 와 같아야 한다(index.jsp 가 style 로 넣어 준다). 멈춤 상태면 비어 있다. */
#main_page .hero_count i{display:block; position:relative; width:68px; height:2px; border-radius:2px; background:var(--ct); overflow:hidden;}
#main_page .hero_count i:after{content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--cbar);
	transform:scaleX(0); transform-origin:left center;}
#main_page .hero_count i.is_tick:after{animation:hcTick var(--hold, 7200ms) linear forwards;}
@keyframes hcTick{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
/* svh: 모바일에서 100vh 는 주소창이 사라진 뒤의 높이라 첫 화면이 잘린다. 지원하지 않는 브라우저는 위 vh 를 쓴다.
   [2026-09-14] 화면에서 한 뼘(110~200px) 덜어 낸 높이 - 아래에 흰 여백이 남는다. [이전 값] 100svh */
#main_page .hero{height:calc(100svh - clamp(110px, 16vh, 200px));}

/* ── 밝은 사진 장 (2026-09-14) ─────────────────────────────────────────
   스크립트가 .hero 에 is_light 를 붙이는 장(index.jsp 의 .hero_chapter data-tone="light").
   베일이 걷히므로(위 .hero.is_light .hero_veil) 글자·버튼·SCROLL 표시를 모두 어두운 쪽으로 뒤집는다.
   그림자도 뺀다 - 밝은 바탕에 어두운 글자는 그림자가 오히려 번져 보인다.
   숫자는 깊은 쪽빛(#1b3a5c) - [이전 값 브랜드 녹색 → 로고 파랑 #005aab, 2026-09-15 원장님 지시로 차례로 교체].
   ⚠ 색만 바꾼다. 위치·크기·움직임 규칙은 어두운 장과 똑같이 쓴다. */
#main_page .hero.is_light .hc_title{color:var(--hs-title); text-shadow:none;}
/* [색 변경 2026-09-15] 브랜드 녹색 → 파랑. 원장님 지시 - 포인트는 초록 말고 파랑.
   [두 번째 조정 같은 날] 로고 파랑(#005aab)은 수채화·명조 위에서 채도가 튀어, 푸터 남색(#022443)과
   로고 파랑 사이의 깊은 쪽빛(#1b3a5c)으로 낮췄다 - 먹빛 제목과 한 벌로 읽히면서 파랑임은 남는다.
   [색 변경 2026-09-21] 쪽빛 → 브랜드 녹색(--hs-brand #2c5f55). 쪽빛은 한지·세피아 사진 위에서 탁하게 가라앉아
   숫자가 먹빛 제목과 구분되지 않았다. 같은 날 낙관 인주색(--hs-point)·청람(#2b5c9e)도 시험했으나
   초록이 첫 장 수채화 산·로고의 초록 물결·헤더 배지와 한 벌로 묶여 가장 자연스러웠다.
   (9/15 "초록 말고 파랑" 지시가 있었으나 9/21 초록도 괜찮겠다는 말에 따라 바꿨다 - 원장님 확인 필요)
   아래 진행 막대·SCROLL 선도 같은 색으로 맞췄다. [이전 값] #1b3a5c (되돌릴 때 아래 세 곳 모두) */
#main_page .hero.is_light .hc_num{color:var(--hs-brand);}
#main_page .hero.is_light .hc_desc{color:var(--hs-body); text-shadow:none;}
#main_page .hero.is_light .hero_sign_l{color:var(--hs-muted);}
#main_page .hero.is_light .hero_sign_l strong{color:var(--hs-title);}
/* [2026-09-23] 조작 캡슐은 변수만 뒤집는다 - 밝은 한지 위에서는 흰 유리 */
#main_page .hero.is_light .hero_ctrl{--cf:var(--hs-title); --cm:var(--hs-muted); --ct:rgba(32,43,40,.16); --cbar:var(--hs-brand); --chov:rgba(32,43,40,.07);
	background:rgba(255,255,255,.5); border-color:rgba(32,43,40,.1); box-shadow:0 10px 30px rgba(32,43,40,.08);}
#main_page .hero.is_light .hero_scroll em{color:var(--hs-muted);}
#main_page .hero.is_light .hero_scroll i{background:rgba(32,43,40,.16);}
#main_page .hero.is_light .hero_scroll i:after{background:var(--hs-brand);}
/* 장이 넘어갈 때 색이 툭 바뀌지 않게 - 사진이 겹치며 바뀌는 시간(1.4s)의 절반쯤 */
#main_page .hc_title, #main_page .hc_num, #main_page .hc_desc,
#main_page .hero_count, #main_page .hero_count em{transition:color .6s ease, border-color .6s ease;}
/* [제거 2026-09-08 - 사진 배경일 때의 문구 자리 가독성 처리. 사진을 걷어내며 함께 지웠다.
   사진을 다시 넣을 때 아래 주석을 통째로 풀 것 - 없으면 어록이 배경에 묻힌다.
   ⚠ 지금은 위의 꽃 장식 레이어가 :before 를 쓰고 있다 - 되살리려면 그쪽을 :after 로 옮기거나
     이 가독성 층을 :after 로 바꿔 두 층이 겹치지 않게 할 것.
   문구가 놓인 가운데만 눌러 어둡게 하고(사진의 선명함은 그대로), 그 위의 글자를 흰색으로 뒤집는다.
   .hero 안쪽에만 걸어야 한다 - .hero_copy 는 어록 무대(.quote_stage)에서도 쓰이는 공통 규칙이다.
#main_page .hero:before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:radial-gradient(ellipse 64% 48% at 50% 46%, rgba(10,9,7,.66) 0%, rgba(10,9,7,.4) 52%, rgba(10,9,7,.12) 78%, rgba(10,9,7,0) 100%);}
#main_page .hero .hero_copy .label{color:#e3cfa6;}
#main_page .hero .hero_copy h1{color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.5);}
#main_page .hero .hero_copy .hero_sign{color:rgba(255,255,255,.86); text-shadow:0 2px 14px rgba(0,0,0,.45);}
#main_page .hero .hero_copy .hero_sign strong{color:#fff;}
*/
/* [이전 버전 - 첫 화면에 브랜드 인트로("몸의 균형을 돌보는 시간")를 두던 시절.
   대표원장 어록이 첫 화면으로 올라오며 쓰지 않게 됐다(문구는 .hero_copy 규칙을 쓴다).
   되돌릴 때 아래 주석과 반응형 블록의 .hero_intro 규칙을 함께 풀고 index.jsp 마크업도 살릴 것.
#main_page .hero_intro{max-width:1040px; margin:0 auto; text-align:center;}
#main_page .hero_intro .label{display:block; margin-bottom:22px; font-size:13px; font-weight:500; letter-spacing:2.86px; line-height:1; color:var(--hs-accent);}
#main_page .hero_intro .label:before,
#main_page .hero_intro .label:after{content:''; display:inline-block; width:38px; height:1px; vertical-align:middle; background:currentColor; opacity:.65;}
#main_page .hero_intro .label:before{margin:0 14px 5px 0;}
#main_page .hero_intro .label:after{margin:0 0 5px 14px;}
#main_page .hero_intro h1{font-family:var(--hs-gungseo); font-size:64px; font-weight:400; line-height:1.5; letter-spacing:0.4px; color:#2b2b2b; word-break:keep-all;}
#main_page .hero_intro p{margin-top:24px; font-size:19px; font-weight:400; line-height:1.75; color:var(--hs-body); word-break:keep-all;}
*/

/* ② 스승과 제자 (2026-09-14 개편) - 흰 바탕 위에 세 대목(어록·추천서·원칙)이 세로로 이어진다.
   [제거 2026-09-14] 어둠이 번지는 무대(.quote_wrap / .quote_stage / .hero_sky / .sky_veil / 별 캔버스),
     화면을 붙들고 가로로 밀던 구간(.hs_wrap / .hs_pin / .hs_track / .hs_panel), 소나무(.hs_tree),
     구름(.hs_cloud), 어둠 위 복제 문구(.side_copy / .sky_copy), 별을 보던 여백(.quote_after),
     그리고 어둠에 맞춰 글자색을 옮기던 tintSets(index.jsp). 원장님 지시 - 밝고 단순하게.
     규칙은 _backup_20260914_hero/main.css 에 통째로 있다.
   위 여백은 첫 화면 아래 흰 여백과 합쳐진다 - 첫 화면이 화면을 꽉 채우지 않으므로(.hero 높이)
   여기 여백을 크게 두면 빈 화면이 길어진다. 대목 사이 간격은 .st_panel 이 맡는다. */
#main_page .story{position:relative; padding:clamp(60px, 9vh, 120px) 0 clamp(70px, 10vh, 130px); background:#fff; overflow:hidden;}
#main_page .story .inner{position:relative; z-index:1;}
/* 수채 장식 두 장 (2026-09-15, index.jsp 의 .st_deco).
   원본은 모서리에 붙여 쓰라고 만든 그림이라 바깥쪽 가장자리는 화면 밖으로 내보내고(음수 오프셋),
   안쪽으로 향한 가장자리는 마스크로 흰 바탕에 녹인다 - 그래야 사각형으로 뚝 잘린 자국이 남지 않는다.
   ⚠ 마스크는 두 방향(가로·세로)을 곱해야 한다. mask-composite 대신 두 그라디언트를 겹쳐 두면
     두 축 모두 끝이 풀린다(-webkit-mask-composite:source-in / mask-composite:intersect).
   진하기는 .55~.6 - 제 색 그대로 두면 글 곁에서 그림이 앞으로 나온다. */
#main_page .st_deco{position:absolute; z-index:0; display:block; pointer-events:none; background-repeat:no-repeat; background-size:contain;}
/* 왼쪽 위 - 나뭇가지(1900x892). 가지가 오른쪽 아래로 뻗으므로 오른쪽·아래 끝을 풀어 준다 */
/* [크기 2026-09-15] min(1040px, 60vw) → min(1400px, 78vw) (원장님 지시 - 더 크게) */
#main_page .st_deco_tl{left:-5%; top:-4%; width:min(1400px, 78vw); aspect-ratio:1900/892; opacity:.65;
	background-image:url('/img/contents_bg_01.png'); background-position:left top;
	-webkit-mask-image:linear-gradient(90deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,0) 100%);
	        mask-image:linear-gradient(90deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,0) 100%);
	-webkit-mask-composite:source-in; mask-composite:intersect;}
/* 오른쪽 아래 - 산과 풀(1660x1254). 산 능선이 왼쪽으로 이어지므로 왼쪽·위 끝을 풀어 준다.
   원본 왼쪽 가장자리에 압축 자국(얼룩)이 있어 왼쪽 마스크를 조금 더 깊게 잡는다 */
/* [크기 2026-09-15] min(820px, 48vw) → min(1150px, 66vw) (원장님 지시 - 더 크게) */
#main_page .st_deco_br{right:-3%; bottom:-2%; width:min(1150px, 66vw); aspect-ratio:1660/1254; opacity:.6;
	background-image:url('/img/contents_bg_02.png'); background-position:right bottom;
	-webkit-mask-image:linear-gradient(270deg, #000 0%, #000 40%, rgba(0,0,0,0) 100%), linear-gradient(0deg, #000 0%, #000 45%, rgba(0,0,0,0) 100%);
	        mask-image:linear-gradient(270deg, #000 0%, #000 40%, rgba(0,0,0,0) 100%), linear-gradient(0deg, #000 0%, #000 45%, rgba(0,0,0,0) 100%);
	-webkit-mask-composite:source-in; mask-composite:intersect;}
#main_page .hero .inner{position:relative; z-index:2;}
/* 한 대목. 세로로 쌓이므로 높이를 화면에 맞추지 않고 내용에 맡긴다 - 대목마다 그림 크기가 달라
   화면 높이로 못 박으면 어느 하나는 위아래가 남거나 넘친다. 대목 사이는 넉넉히 - 한 화면에
   두 대목이 겹쳐 들어오면 어느 것을 읽어야 할지 눈이 갈린다. */
#main_page .st_panel{padding:clamp(40px, 7vh, 90px) 0;}
#main_page .st_panel + .st_panel{border-top:1px solid rgba(166,138,100,.16);}
/* [이전 버전 - 왼쪽 정렬] #main_page .hero_copy{max-width:900px;} */
#main_page .hero_copy{max-width:1040px; margin:0 auto; text-align:center;}
#main_page .hero_copy > *{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
#main_page .hero.is_ready .hero_copy > *{opacity:1; transform:none;}
#main_page .hero.is_ready .hero_copy .label{transition-delay:.15s;}
/* [이전 버전 - 문구가 통째로 페이드인하던 시절. 되돌릴 때 아래 3줄을 살리고 아래 "붓" 블록을 지운다]
#main_page .hero.is_ready .hero_copy h1{transition-delay:.3s;}
#main_page .hero.is_ready .hero_copy p{transition-delay:.5s;}
#main_page .hero.is_ready .hero_copy .btn_hero{transition-delay:.65s;}
*/
/* 붓이 지나가듯 왼쪽부터 드러난다(2026-09-07).
   clip-path 로 잘라 밀면 경계가 딱 떨어져 붓이 아니라 셔터가 지나가는 것처럼 보인다.
   그래서 요소 폭의 2.6배짜리 그라디언트 마스크를 만들어 위치만 옮긴다 - 흐릿한 경계가 획을 쓸고 지나간다.
   mask 를 지원하지 않는 브라우저에서는 규칙이 통째로 무시되어 글자가 그냥 보인다(안전).
   h1 은 위 .hero_copy > * 의 페이드 대신 이 효과만 쓴다
   (선택자가 더 구체적이라 !important 없이 덮인다). */
/* 그라디언트 비율(40% / 46%)과 mask-size(260%)는 함께 계산된 값이라 한쪽만 바꾸면 어긋난다.
   마스크 폭 = 요소 폭 × 2.6, 위치가 0%→100% 로 가는 동안 요소가 보는 구간은 마스크의 [0,1/2.6] → [1.6/2.6, 1] 로 옮겨간다.
     · 다 보이는 끝(0%): 불투명 구간 0.40×2.6 = 1.04 ≥ 1 이라 요소 전체가 덮인다
     · 안 보이는 시작(100%): 투명 시작 0.46×2.6 = 1.20 ≤ 1.6 이라 요소 전체가 비워진다
   앞서 `#000 58% → 투명 100%` 로 두었더니 마스크에 완전 투명 구간이 없어,
   시작 상태에서도 글자가 90% 넘게 보여 붓 효과가 거의 나타나지 않았다. */
#main_page .hero_copy h1{opacity:1; transform:none;}
#main_page .hero_copy h1 .ln,
#main_page .hero_copy .hero_sign{display:block;
	-webkit-mask-image:linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 100%);
	        mask-image:linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 100%);
	-webkit-mask-size:260% 100%;         mask-size:260% 100%;
	-webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
	-webkit-mask-position:100% 0;        mask-position:100% 0;
	transition:-webkit-mask-position 1s cubic-bezier(.3,.7,.4,1), mask-position 1s cubic-bezier(.3,.7,.4,1);}
#main_page .hero.is_ready .hero_copy h1 .ln,
#main_page .hero.is_ready .hero_copy .hero_sign{-webkit-mask-position:0 0; mask-position:0 0;}
/* 한 줄이 다 그려지기 전에 다음 줄이 시작해 획이 이어지는 느낌을 준다 */
#main_page .hero.is_ready .hero_copy h1 .ln:nth-child(1){transition-delay:.30s;}
#main_page .hero.is_ready .hero_copy h1 .ln:nth-child(2){transition-delay:.80s;}
/* 서명은 짧아 빨리 그린다. 페이드(.hero_copy > *)도 함께 받으므로 지연을 맞춘다 */
#main_page .hero_copy .hero_sign{transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1), -webkit-mask-position .7s cubic-bezier(.3,.7,.4,1), mask-position .7s cubic-bezier(.3,.7,.4,1);}
#main_page .hero.is_ready .hero_copy .hero_sign{transition-delay:1.55s;}
#main_page .hero.is_ready .hero_copy .btn_hero{transition-delay:2s;}
/* 문구 교체(2026-08-26) - 대표원장 어록. 두 줄짜리 인용문이라 이전 한 줄 제목(64px)보다 조금 작게 잡는다.
   [이전 버전] h1{font-size:64px;} / p{margin-top:16px; font-size:24px; ...} */
/* 글자색은 흰 바탕 기준(어두운 글자)이다. 어둠(.hero_sky) 안쪽에 겹쳐 둔 같은 문구는
   아래 "어둠 안쪽 문구" 블록에서 흰 글자로 덮어쓴다 - 원 경계에서 색이 바뀌는 것처럼 보이는 장치. */
/* 라벨을 키우고 굵게(2026-09-08). 자간은 함께 줄인다 - 글자가 커진 만큼 2.86px 을 그대로 두면
   낱글자가 흩어져 한 덩어리로 읽히지 않는다.
   [이전 값] font-size:13px; font-weight:500; letter-spacing:2.86px; */
#main_page .hero_copy .label{display:block; margin-bottom:20px; font-size:20px; font-weight:700; letter-spacing:1.6px; line-height:1; color:var(--hs-accent);}
/* [제거 2026-09-08 - 라벨 양옆의 짧은 선. 되돌릴 때 아래 주석을 풀 것
   (가운데 정렬이라 두 개를 짝으로 둔다. 왼쪽 정렬이던 시절에는 :before 하나만 두고 margin:0 14px 5px 0 였다)
#main_page .hero_copy .label:before,
#main_page .hero_copy .label:after{content:''; display:inline-block; width:38px; height:1px; vertical-align:middle; background:currentColor; opacity:.65;}
#main_page .hero_copy .label:before{margin:0 14px 5px 0;}
#main_page .hero_copy .label:after{margin:0 0 5px 14px;}
*/
/* 인용문과 서명은 손글씨체(--hs-hand, East Sea Dokdo)로 - 어록을 직접 적은 느낌을 준다(2026-08-27).
   font-weight 는 400 고정. 이 폰트는 Regular 한 벌뿐이라 700/600 을 주면 가짜 볼드가 합성돼 획이 뭉개진다.
   [이전 버전 - 되돌릴 때 아래 3줄을 살리고 현재 3줄을 지운다]
   #main_page .hero_copy h1{font-family:var(--hs-serif); font-size:52px; font-weight:700; ...}
   #main_page .hero_copy .hero_sign{... font-family:var(--hs-serif); font-size:21px; ...}
   #main_page .hero_copy .hero_sign strong{... font-size:25px; font-weight:600; ...} */
/* [이전 버전 - 손글씨체(--hs-hand, East Sea Dokdo)이던 시절. 되돌릴 때 아래 3줄을 살리고 현재 3줄을 지운다.
   손글씨체는 같은 px 에서 글자 폭이 명조의 약 58% 라, 명조 52px 에 맞추려고 80px 까지 키운 값이었다]
#main_page .hero_copy h1{font-family:var(--hs-hand); font-size:80px; font-weight:400; line-height:1.44; letter-spacing:-0.72px; ...}
#main_page .hero_copy .hero_sign{margin-top:22px; font-family:var(--hs-hand); font-size:28px; ...}
#main_page .hero_copy .hero_sign strong{margin-left:6px; font-size:42px; ...}
*/
/* 궁서체로 교체(2026-09-07). 손글씨체보다 글자 폭이 훨씬 넓어(명조와 비슷한 폭) 같은 px 로 두면
   두 줄이 화면을 넘친다 - 80px → 56px 로 낮췄다. 자간도 손글씨용 음수(-0.72px)를 풀었다:
   궁서체 정자는 자간을 좁히면 획이 서로 붙어 답답해진다.
   font-weight 는 400 고정 - 궁서체·Song Myung 모두 Regular 한 벌뿐이라 굵게 주면 가짜 볼드가 획을 뭉갠다. */
#main_page .hero_copy h1{font-family:var(--hs-gungseo); font-size:clamp(32px, 3.2vw, 42px); font-weight:400; line-height:1.5; letter-spacing:0.4px; color:#2b2b2b; word-break:keep-all;}
#main_page .hero_copy p{margin-top:16px; font-size:18px; font-weight:400; line-height:1.575; color:var(--hs-body);}
#main_page .hero_copy .hero_sign{margin-top:24px; font-family:var(--hs-gungseo); font-size:17px; letter-spacing:0.4px; color:var(--hs-body);}
/* 이름만 한 단계 더 크게 - 서명 줄에서 '대표원장'보다 도드라지게 한다(2026-08-27). [손글씨체 시절 42px] */
#main_page .hero_copy .hero_sign strong{margin-left:8px; font-size:21px; font-weight:400; color:var(--hs-title);}
#main_page .hero_copy .btn_hero{display:inline-flex; align-items:center; justify-content:center; margin-top:30px; padding:15px 36px; border:1px solid #c8c8c8; font-size:16px; font-weight:500; letter-spacing:0.64px; color:var(--hs-title); background:transparent; transition:background-color .3s ease, border-color .3s ease, color .3s ease;}
#main_page .hero_copy .btn_hero:hover{border-color:var(--hs-brand); background:var(--hs-brand); color:#fff;}

/* ── 어둠 안쪽 문구 ──────────────────────────────────────────────
   .sky_copy 에 같은 문구를 흰 글자로 겹쳐 둔다. 이 블록 전체가 어둠과 같은 타원으로 잘리므로
   안쪽에서는 흰 글자가, 바깥에서는 위의 어두운 글자가 보여 경계에서 색이 바뀌는 것처럼 읽힌다.
   두 벌이 정확히 겹쳐야 하므로 위치를 정하는 값(폭·정렬·글자 크기)은 절대 여기서 바꾸지 말 것 -
   색만 덮어쓴다. 문구 자체는 /include/main_hero_copy.jsp 한 곳에서만 고친다. */
#main_page .sky_copy .hero_copy .label{color:#cdb68b;}
#main_page .sky_copy .hero_copy h1{color:#fff;}
#main_page .sky_copy .hero_copy p{color:rgba(255,255,255,.86);}
#main_page .sky_copy .hero_copy .hero_sign{color:rgba(255,255,255,.78);}
#main_page .sky_copy .hero_copy .hero_sign strong{color:#fff;}
#main_page .sky_copy .hero_copy .btn_hero{border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.04);}

/* 밤하늘 - 문구 한가운데(50% 50%)에서 원형으로 번져 화면을 덮는다.
   원의 중심이 곧 문구의 중심이라 "텍스트에서 어둠이 퍼져 나오는" 것처럼 보인다.
   margin-top 음수로 문서 흐름상 히어로와 같은 자리에서 시작해야 스크롤 내내 화면에 붙어 있다.
   z-index 로 히어로 위에 얹는다. 높이는 svh 가 아니라 vh - 주소창이 걷힌 최대 높이로 잡아야
   어느 순간에도 화면에 빈 곳이 안 생긴다.
   JS 가 clip-path 의 반지름을 0% → 88% 로 키운다. JS 가 없으면 0% 인 채로 나타나지 않는다.
   별과 별똥별은 /js/main_hero_sky.js 가 three.js 로 이 안에 캔버스를 만들어 그린다.
   그 스크립트가 실패해도 아래 그라디언트만으로 밤하늘로 성립한다. */
/* 문구 중심에 붙어 함께 흘러가는 원. 섹션보다 훨씬 크게 잡아 두고 clip-path 의 반지름만 키우면
   원이 화면 밖까지 번져 전체를 덮는다(반지름은 JS 가 px 로 준다).
   vmax 로 크게 잡아도 absolute 라 문서 흐름에는 영향이 없고, 가로 넘침은
   이 파일 10행의 `overflow-x:clip` 이 잘라 준다. */
/* 중앙 정렬에 transform 을 쓰지 않는 이유: transform 이 걸린 요소는 자손 position:fixed 의 기준이 되어,
   아래 .sky_veil / canvas 의 fixed(뷰포트 고정)가 이 5120px 짜리 상자 기준으로 잡혀 버린다.
   음수 마진으로 가운데를 맞추면 그 문제가 없다. */
/* [변경 2026-09-09] 어둠을 clip-path 로 오려내던 방식을 걷어냈다.
   경계가 칼로 자른 듯 딱 떨어져(원 → 모서리 둥근 사각형) 도형이 커지는 것이 그대로 보였다.
   지금은 아래 .sky_veil 의 배경 그라디언트가 곧 어둠의 모양이다 - 가운데는 완전히 어둡고
   가장자리로 갈수록 스미듯 옅어져, 먹이 화선지에 번지는 것처럼 경계선 없이 퍼진다.
   그래서 이 상자는 자르지 않고 열어 둔다(자식 .sky_veil / canvas 는 스스로 화면에 고정된다).
   [되돌릴 때 - 아래 세 줄을 살리고 draw() 의 clip-path 계산도 함께 되살릴 것
   	-webkit-clip-path:inset(50% 50% round 50%); clip-path:inset(50% 50% round 50%);
   	transition:-webkit-clip-path .42s cubic-bezier(.25,.6,.35,1), clip-path .42s cubic-bezier(.25,.6,.35,1);] */
/* [제거 2026-09-14] #main_page .hero_sky - 어둠의 무대. 위 ② 주석 참고 */
/* 원형 영상을 가운데 두고 어록을 양옆에 크게 나눠 싣는다.
   이 원의 중심이 곧 섹션의 중심이라, 어둠(.hero_sky)이 바로 이 자리에서 번져 나온다.
   쌓임 순서가 연출의 핵심이다 - 양옆 글자(1)는 어둠(2)에 덮여 사라지고, 영상(3)만 어둠 위에 남는다.
   그래서 .inner 에는 z-index 를 주지 않는다(주면 자식들이 그 층 안에 갇혀 어둠과 겨룰 수 없다). */
#main_page .video_row{display:flex; align-items:center; justify-content:center; gap:clamp(16px, 3vw, 54px);}
/* 어록 양옆 문구 - 본문과 같은 고딕으로(2026-09-08).
   궁서체는 획이 가늘어 400 으로 두었지만, 고딕은 같은 크기에서 더 가벼워 보이므로 500 으로 올리고
   자간도 음수로 좁힌다(고딕은 자간을 벌리면 낱글자가 흩어져 보인다).
   [이전 - 궁서체이던 시절] font-family:var(--hs-gungseo); font-weight:400; letter-spacing:0.4px; */
/* z-index 3 - 어둠(.hero_sky 의 2)보다 위. 어둠이 화면을 고르게 덮게 되면서(2026-09-09)
   아래층에 두면 글자가 그대로 묻힌다. 위층에 두고 색만 흰색으로 옮겨 어둠 속에서도 읽히게 한다.
   [이전 값 z-index:1 - 어둠에 덮여 사라지고, 어둠 위 복제본(.side_copy)이 흰 글자를 맡던 시절] */
#main_page .side_t{position:relative; z-index:3; flex:1 1 0; min-width:0;
	/* [이전 값] font-size:clamp(24px, 3.4vw, 58px) - 한 단계 키웠다.
	   더 키우면 "맞춘 쉬운 설명," 이 한 줄에 들어가지 못해 양옆이 세 줄로 늘어난다 */
	font-family:var(--hs-sans); font-size:clamp(26px, 3.9vw, 62px); font-weight:500; line-height:1.4;
	letter-spacing:-1px; color:#2b2b2b; word-break:keep-all;}
#main_page .side_l{text-align:right;}
#main_page .side_r{text-align:left;}
#main_page .quote_video{position:relative; z-index:3; flex:0 0 auto;
	width:min(420px, 34vw); aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:#0e131b;}
#main_page .quote_video video{display:block; width:100%; height:100%; object-fit:cover;}

/* ── 스승과 제자 (2026-09-09) ─────────────────────────────────────────
   이 사이트의 주제를 정면으로 말하는 한 덩어리. 위에서 아래로 한 줄기로 읽힌다 -
   라벨 → 제목 → 영상 → 본문 → 서명.
   [이전 - 문구를 원형 영상 좌우로 쪼개 싣던 구성(.video_row / .side_t). 문장이 영상에 가로막혀
    읽는 흐름이 끊겼고 주제도 드러나지 않았다. 규칙은 위에 그대로 남아 있다]
   [2026-09-14] 밝은 바탕 위 어두운 글자로 고정 - 어둠에 맞춰 색을 옮기던 처리(tintSets)는 걷어냈다.
   [크기 조정 2026-09-14] 제목·본문을 한 단계 더 키웠다(원장님 지시 - 글자를 키워서).
   [이전 값] sr_title clamp(32px, 4vw, 66px) / sr_body clamp(16px, 1.35vw, 21px) / sr_sign 17px·strong 21px */
/* [레이아웃 2026-09-09] 원형 영상을 왼쪽에 크게, 글은 오른쪽에.
   [이전 - 위에서 아래로 한 줄기로 쌓던 구성. 되돌릴 때 아래 한 줄을 쓴다
    #main_page .story_row{... display:flex; flex-direction:column; align-items:center; max-width:900px; text-align:center;}] */
#main_page .story_row{position:relative; display:flex; align-items:center;
	gap:clamp(36px, 5vw, 84px); max-width:1280px; margin:0 auto; text-align:left;}
#main_page .sq_media{flex:0 0 auto;}
#main_page .sq_text{flex:1 1 0; min-width:0;}
/* 라벨 - 양옆에 가는 선을 달아 이야기의 머리말처럼 보이게 한다 */
#main_page .sr_era{display:flex; align-items:center; gap:14px; margin-bottom:20px;
	font-family:var(--hs-sans); font-size:14px; font-weight:500; letter-spacing:3.4px; line-height:1; color:#8a6f3c;}
#main_page .sr_era:before,
#main_page .sr_era:after{content:''; display:block; width:44px; height:1px; background:currentColor; opacity:.6;}
/* 제목 - 이 덩어리에서 가장 먼저 읽히는 한마디. 명조로 두어 뒤 본문(고딕)과 층을 나눈다 */
#main_page .sr_title{font-family:var(--hs-serif); font-size:clamp(26px, 2.8vw, 42px); font-weight:600;
	line-height:1.35; letter-spacing:-0.8px; color:var(--hs-title); word-break:keep-all;}
/* 영상 - 왼쪽 자리를 차지하는 주인공이라 크게 잡는다.
   [이전 값 min(340px, 26vw) - 글 위에 얹혀 있던 시절의 크기] */
/* [이전 값 2026-09-10] min(480px, 36vw) */
#main_page .story_row .quote_video{width:min(560px, 41vw);}
#main_page .sr_body{margin-top:30px; font-size:clamp(17px, 1.5vw, 23px); font-weight:300; line-height:1.85;
	letter-spacing:-.2px; color:var(--hs-body); word-break:keep-all;}
/* [크기 조정 2026-09-23] 한 단계 키웠다(원장님 지시). [이전 값] 18px / strong 23px, margin-top 28px */
#main_page .sr_sign{display:block; margin-top:32px; font-family:var(--hs-sans); font-size:21px; font-weight:400;
	letter-spacing:.6px; color:var(--hs-muted);}
#main_page .sr_sign strong{margin-left:10px; font-size:29px; font-weight:600; color:var(--hs-title);}

/* ── 추천서 · 원칙 (2026-09-14 정리) ─────────────────────────────────────
   [제거 2026-09-14] 이 자리에 있던 가로 구간(.hs_wrap / .hs_pin / .hs_track / .hs_panel), 구름(.hs_cloud),
     소나무(.hs_tree), 어둠(.sky_veil / 별 캔버스), 어둠 위 복제 문구(.side_copy / .sky_copy)와
     그 폴백(body:not(.hero_fx) …) 규칙 전부. 이제 세 대목은 흰 바탕 위에 세로로 쌓이므로
     붙들기·밀기·어둠에 맞춘 색 뒤집기가 모두 필요 없다. 원본은 _backup_20260914_hero/main.css 참고.
   글자색은 처음부터 어두운 쪽이다(예전에는 어두워진 화면 위라 흰색으로 못 박았었다). */

/* 두 번째 대목 - 추천서. 어록과 같은 배치(왼쪽 그림 · 오른쪽 글)로 두어 그림이 먼저 눈에 들어오고 그 옆에서 글을 읽는다. */
#main_page .letter_row{position:relative; display:flex; align-items:center;
	gap:clamp(36px, 5vw, 84px); max-width:1280px; margin:0 auto; text-align:left;}
/* 문서 사진은 세로로 긴 것(A4)일 수도, 가로로 넓은 것일 수도 있다 - 비율을 고정하지 않고
   폭과 높이의 상한만 준다. 어느 쪽이든 원본 비율 그대로 상한 안에 들어앉는다 */
/* [크기 조정 2026-10-01] 추천서 글씨가 잘 안 보인다는 의견 - 그림 폭 상한을 키우고 글 칸을 그만큼 좁혔다.
   (눌러서 크게 보기는 custom.css 의 .lt_zoom / js/letter_zoom.js) [이전 값] max-width:min(540px, 40vw) */
#main_page .lt_media{flex:0 0 auto; display:flex; justify-content:center; max-width:min(680px, 48vw);}
/* 흰 바탕에 흰 종이라 테두리와 그림자로 종이의 윤곽을 세운다. 지금 자리를 지키는 임시 이미지(인증서)가
   배경이 비치는 PNG 라 바탕은 흰색으로 깔아 둔다 - 실제 추천서 사진으로 갈아 끼우면 그대로 액자가 된다. */
#main_page .lt_frame{display:inline-block; padding:clamp(8px, .9vw, 16px); background:#fff;
	border:1px solid rgba(166,138,100,.35); box-shadow:0 18px 44px rgba(32,43,40,.12);}
#main_page .lt_frame img{display:block; max-width:100%; max-height:64vh; max-height:64svh; width:auto; height:auto;}
#main_page .lt_text{flex:1 1 0; min-width:0;}
/* [크기 조정 2026-09-14] 어록(.sr_title / .sr_body)과 같은 값으로 - 세 대목이 한 말씨를 쓴다.
   [이전 값] 제목 clamp(32px, 4vw, 66px) / 본문 clamp(16px, 1.35vw, 21px), 둘 다 흰 글자 */
#main_page .lt_title{font-family:var(--hs-serif); font-size:clamp(26px, 2.8vw, 42px); font-weight:600;
	line-height:1.35; letter-spacing:-0.8px; color:var(--hs-title); word-break:keep-all;}
#main_page .lt_body{margin-top:30px; font-size:clamp(17px, 1.5vw, 23px); font-weight:300; line-height:1.85;
	letter-spacing:-.2px; color:var(--hs-body); word-break:keep-all;}
/* 세 번째 대목 - 스승이 세운 원칙, 그대로 지키는 진료.
   앞 대목과 좌우를 바꿔 글이 왼쪽, 사진이 오른쪽이다. 사진은 액자에 넣지 않고 그대로 크게 쓴다(종이와 사람을 다르게 다룬다).
   ⚠ object-position 의 6% - 원본에서 두 분이 왼쪽에 몰려 있어, 정사각형으로 자를 때
     왼쪽을 잡아야 스승이 화면 밖으로 잘려 나가지 않는다. 사진을 갈아 끼우면 이 값을 다시 볼 것. */
#main_page .pupil_row{position:relative; display:flex; align-items:center;
	gap:clamp(36px, 5vw, 84px); max-width:1280px; margin:0 auto; text-align:left;}
#main_page .pp_text{flex:1 1 0; min-width:0;}
#main_page .pp_media{flex:0 0 auto; width:min(520px, 39vw);}
#main_page .pp_photo{display:block; aspect-ratio:1/1; overflow:hidden;
	border:1px solid rgba(166,138,100,.28); background:#f1eadd; box-shadow:0 18px 44px rgba(32,43,40,.12);}
/* 원본이 16:9 가로 사진이라 정사각형으로 잘라도 세로는 전부 들어온다 - 위쪽 빈 벽이 그대로 남아
   두 분이 작게 보인다. 조금 확대해 그 여백을 덜어 내되, 기준점을 아래쪽에 두어 잘리는 쪽이 위가 되게 한다. */
#main_page .pp_photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:6% center;
	transform:scale(1.2); transform-origin:32% 78%;}

/* ── 세 대목 글 정렬 (2026-09-23 원장님 지시) ─────────────────────────────
   받은 의견: ① 글과 사진이 멀어 불편하다 ② 글이 좌우·상하 치우침 없이 가운데 놓였으면
   ③ 왼쪽 맞춤보다 가운데 맞춤 ④ 영상 기준 위아래 여백을 비슷하게.
   - 글 칸(flex:1) 안에서 가운데 맞춤 - 왼쪽 맞춤이면 글이 칸 왼쪽 끝에 붙어, 사진 반대편에 빈 땅이 남아
     글과 사진이 떨어져 보였다. 가운데로 두면 글 덩어리가 사진 옆 빈 자리의 한가운데에 선다.
   - 줄 폭을 1280 → 1160px 로 좁혀 글과 사진 사이의 빈 땅 자체를 줄인다.
   - 상하 가운데는 행의 align-items:center 가 이미 맡고 있다. 글 덩어리 첫 요소·끝 요소의 바깥 여백이 0 이라
     영상 위·아래로 남는 여백이 같다. */
#main_page .story_row,
#main_page .letter_row,
#main_page .pupil_row{max-width:1160px;}
#main_page .sq_text,
#main_page .lt_text,
#main_page .pp_text{text-align:center;}
/* 원칙 대목 본문 - 한 줄씩 끊어 읽는 글이라 줄 사이를 조금 더 띄우고 자간을 살짝 연다 */
#main_page .pp_text .lt_body{line-height:2; letter-spacing:0;}

/* 대목이 화면에 들어오면 그림과 글이 차례로 떠오른다. index.jsp 가 IntersectionObserver 로 .st_panel 에 is_in 을 붙인다.
   (어록 대목의 글은 .sq_text 안에 있다 - 세 대목을 한 규칙에 모아 둔다) */
#main_page .st_panel .lt_media,
#main_page .st_panel .pp_media,
#main_page .st_panel .sq_media,
#main_page .st_panel .lt_text > *,
#main_page .st_panel .pp_text > *,
#main_page .st_panel .sq_text > *{opacity:0; transform:translateY(26px);
	transition:opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
#main_page .st_panel.is_in .lt_media,
#main_page .st_panel.is_in .pp_media,
#main_page .st_panel.is_in .sq_media,
#main_page .st_panel.is_in .lt_text > *,
#main_page .st_panel.is_in .pp_text > *,
#main_page .st_panel.is_in .sq_text > *{opacity:1; transform:none;}
#main_page .st_panel.is_in .lt_title,
#main_page .st_panel.is_in .sr_title{transition-delay:.12s;}
#main_page .st_panel.is_in .lt_body,
#main_page .st_panel.is_in .sr_body{transition-delay:.26s;}
#main_page .st_panel.is_in .sr_sign{transition-delay:.38s;}
/* 글이 먼저인 대목에서는 사진이 가장 늦게 든다 - 말을 읽고 나서 두 분을 보게 된다 */
#main_page .st_pupil.is_in .pp_media{transition-delay:.38s;}

/* 제목 둘째 줄 밑줄 (2026-09-10) - 대목이 화면에 자리 잡으면 왼쪽에서 오른쪽으로 그어진다.
   제목이 떠오른 뒤에 그어져야 해서 조금 늦게(.5s) 시작한다 - 글자와 동시에 나오면 둘이 뒤엉킨다.
   ⚠ display:inline-block 이라야 밑줄이 그 줄의 글자 폭에 딱 맞는다. inline 으로 두면
     ::after 의 width:100% 가 줄 조각 기준이 되어, 줄이 나뉘는 화면에서 길이가 어긋난다.
   ⚠ 길이를 width 로 늘리지 않고 scaleX 로 늘린다 - 매 프레임 레이아웃을 다시 잡지 않아 매끄럽다.
   [색 조정 2026-09-14] 밤하늘 위에서 빛나던 옅은 금빛 → 흰 바탕에서 읽히는 고서 금색(--hs-gold 계열).
     아래로 번지던 글로우(:before)는 밝은 바탕에서는 얼룩으로만 보여 아주 옅게 낮췄다.
   ⚠ 굵기·바닥 위치를 em 으로 잡는다 - 제목이 clamp 로 화면 따라 커지므로 px 로 두면 큰 화면에서는 실처럼 가늘다.
   ⚠ 두 겹의 transition 값(시간·곡선·지연)은 반드시 같아야 한다 - 어긋나면 빛이 선을 앞질러 번진다. */
#main_page .st_panel .uline{position:relative; display:inline-block;}
#main_page .st_panel .uline:before,
#main_page .st_panel .uline:after{display:none !important;}

@media (prefers-reduced-motion: reduce){
	#main_page .st_panel .lt_media,
	#main_page .st_panel .pp_media,
	#main_page .st_panel .sq_media,
	#main_page .st_panel .lt_text > *,
	#main_page .st_panel .pp_text > *,
	#main_page .st_panel .sq_text > *{opacity:1; transform:none; transition:none;}
	#main_page .st_panel .uline:before,
	#main_page .st_panel .uline:after{transform:none; transition:none;}
}

/* ── 추천서 두 장 - 강조 대목 (2026-10-02) ─────────────────────────────────
   실제 추천서(친필 원본 · 옮겨 적은 글)를 받아, 세 대목 가운데 이 대목만 무게를 더 싣는다.
   - 화면 폭 전체에 한지색 띠를 깔고 위아래에 고서 금색 실선을 긋는다(:before).
     .story 가 overflow:hidden 이라 100vw 로 펼쳐도 가로 스크롤이 생기지 않는다.
   - 띠 뒤에 "師弟之間" 을 아주 옅게 새긴다(.lt_mark) - 추천서 제목 "사제지간 부자지간" 에서 따왔다.
   - 글을 위에 가운데로 두고, 두 장을 그 아래 나란히 펼친다.
   - 등장: 가운데 겹쳐 있던 두 장이 좌우로 벌어지며 살짝 기운 채 자리 잡는다.
     호버: 그 장이 들리며 바로 서고 다른 장은 물러난다. 기울기(--rx/--ry)는 js/letter_zoom.js 가 마우스 위치로 준다.
   ⚠ 아래 1024px · 640px 규칙(.lt_media / .lt_frame img)보다 우선해야 해서 .st_letter 를 한 겹 더 붙였다.
   [이전] 왼쪽 그림 한 장 · 오른쪽 글. 되돌릴 때 이 블록을 통째로 지우면 위의 .letter_row / .lt_frame 규칙으로 돌아간다. */
#main_page .st_letter{position:relative; isolation:isolate; padding:clamp(70px, 11vh, 140px) 0;}
#main_page .st_letter:before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
	background:radial-gradient(ellipse at 50% 60%, #fefdfb 0%, #fbf9f5 70%, #f8f5ef 100%);
	-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
	mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);}
/* [2026-10-02] 위아래 대목과 자연스럽게 이어지게(원장님 지시) - 띠의 위아래 가장자리를 흰 바탕으로 녹이고 실선을 뺐다.
   [이전 값] 마스크 없음 + border-top/bottom:1px solid rgba(166,138,100,.22) */
/* [색 조정 2026-10-02] 흰색에 더 가깝게(원장님 지시). 흰 바탕과 구분만 되도록 아주 옅은 미색만 남겼다.
   [이전 값] radial-gradient(… #fbf8f1 0%, #f4efe4 70%, #efe8da 100%) / 실선 rgba(166,138,100,.3) */
/* 띠 위아래로는 구분선이 겹치므로 지운다 */
#main_page .st_panel + .st_letter,
#main_page .st_letter + .st_panel{border-top:0;}
#main_page .lt_mark{position:absolute; z-index:0; left:50%; top:58%; transform:translate(-50%, -50%);
	font-family:var(--hs-serif); font-size:clamp(90px, 15vw, 260px); font-weight:600; line-height:1; letter-spacing:.08em;
	white-space:nowrap; color:rgba(166,138,100,.08); pointer-events:none; user-select:none;}
#main_page .letter_row.is_pair{position:relative; z-index:1; flex-direction:column; align-items:center;
	gap:clamp(40px, 6vh, 70px); max-width:1160px;}
/* [2026-10-02] 본문을 두 줄로 - 둘째 줄이 한 줄에 들어가도록 폭을 넓혔다. [이전 값] max-width:760px */
#main_page .letter_row.is_pair .lt_text{flex:none; max-width:960px;}
#main_page .st_letter .lt_pair{display:flex; justify-content:center; align-items:flex-start; gap:clamp(24px, 4.5vw, 72px);
	width:100%; max-width:none; perspective:1400px;}
/* [크기 조정 2026-10-02] 한 단계 키웠다(원장님 지시). [이전 값] width:min(420px, 36vw) */
#main_page .st_letter .lt_card{position:relative; width:min(480px, 40vw); margin:0;
	transition:transform 1.2s cubic-bezier(.2,.75,.2,1), opacity .9s ease, filter .4s ease;}
/* 등장 전 - 두 장이 가운데에 겹쳐 있다(오른쪽 장이 위). 사본보다 원본이 먼저 눈에 들도록 원본(왼쪽)은 조금 덜 돌린다 */
#main_page .st_letter .lt_card_l{z-index:1; transform:translateX(56%) rotate(-5deg) scale(.94); opacity:0;}
#main_page .st_letter .lt_card_r{z-index:2; transform:translateX(-56%) rotate(4deg) scale(.94); opacity:0;}
#main_page .st_letter.is_in .lt_card_l{transform:rotate(-1.6deg); opacity:1;}
#main_page .st_letter.is_in .lt_card_r{transform:rotate(1.4deg); opacity:1;}
/* 벌어지는 움직임은 글이 떠오른 뒤에 시작한다. 다 벌어진 뒤(is_settled, index.jsp)에는 지연을 걷어 호버가 바로 반응하게 한다 */
#main_page .st_letter.is_in:not(.is_settled) .lt_card{transition-delay:.35s;}
#main_page .st_letter .lt_frame{position:relative; display:block; padding:0; border:0; background:none;
	box-shadow:0 2px 4px rgba(32,43,40,.08), 0 22px 48px rgba(32,43,40,.18);
	transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style:preserve-3d;
	transition:transform .35s ease-out, box-shadow .45s ease;}
#main_page .st_letter .lt_frame img{display:block; width:100%; max-width:none; height:auto; max-height:none;}
/* 빛 한 줄 - 마우스를 따라 종이 위를 스친다(--gx, js/letter_zoom.js). 마우스가 없으면 보이지 않는다 */
#main_page .st_letter .lt_frame:before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
	background:linear-gradient(105deg, transparent calc(var(--gx, 50%) - 22%), rgba(255,255,255,.38) var(--gx, 50%), transparent calc(var(--gx, 50%) + 22%));
	transition:opacity .4s ease;}
#main_page .st_letter .lt_card figcaption{margin-top:20px; font-family:var(--hs-serif); font-size:clamp(15px, 1.1vw, 18px); font-weight:500;
	letter-spacing:.12em; color:var(--hs-gold); text-align:center;}
@media (hover:hover) and (pointer:fine){
	#main_page .st_letter.is_in .lt_card:hover{z-index:3; transform:translateY(-12px) rotate(0deg) scale(1.03);}
	#main_page .st_letter.is_in .lt_card:hover .lt_frame{box-shadow:0 4px 8px rgba(32,43,40,.1), 0 40px 80px rgba(32,43,40,.26);}
	#main_page .st_letter.is_in .lt_card:hover .lt_frame:before{opacity:1;}
	#main_page .st_letter.is_in .lt_pair:hover .lt_card:not(:hover){opacity:.62; filter:saturate(.7);}
	/* "+ 크게 보기" 는 올렸을 때만 - 늘 떠 있으면 두 장 모두 같은 자리에 딱지가 붙어 종이가 지저분해 보인다 */
	#main_page .st_letter .lt_frame.is_zoomable:after{opacity:0; transition:opacity .3s ease;}
	#main_page .st_letter .lt_card:hover .lt_frame.is_zoomable:after{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
	#main_page .st_letter .lt_card,
	#main_page .st_letter.is_in .lt_card_l,
	#main_page .st_letter.is_in .lt_card_r{transform:none; opacity:1; transition:none;}
	#main_page .st_letter .lt_frame{transform:none; transition:none;}
}

/* [제거 2026-09-07] 원이 점으로 줄어드는 찰나의 반짝임(별빛이 터지듯 퍼지던 연출).
   되돌릴 때 아래 주석을 풀고, index.jsp 의 div.hero_spark 마크업과 draw() 안의 섬광 블록,
   그리고 아래 prefers-reduced-motion 블록의 .hero_spark 도 함께 살릴 것.
   원이 사라진 자리는 별(canvas)이 어둠보다 먼저 떠오르며 이어받으므로, 이것 없이도 흐름은 끊기지 않는다.
#main_page .hero_spark{position:sticky; top:0; z-index:3; height:100vh; margin-top:-100vh; overflow:hidden; pointer-events:none; opacity:0;}
#main_page .hero_spark > span{position:absolute; left:50%; top:50%; display:block; width:0; height:0;}
#main_page .hero_spark i{position:absolute; left:50%; top:50%; display:block; transform:translate(-50%,-50%);}
   (halo = 빛 뒤에 함께 퍼지던 어둠. 밝은 한지 배경에서 흰 빛이 묻히지 않게 하는 동시에 밤하늘의 전조였다)
#main_page .hero_spark .halo{width:900px; height:900px;
	background:radial-gradient(circle, rgba(5,11,20,.78) 0%, rgba(5,11,20,.5) 34%, rgba(5,11,20,.16) 56%, rgba(5,11,20,0) 72%);}
#main_page .hero_spark .glow{width:360px; height:360px;
	background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,241,214,.7) 20%, rgba(255,236,200,.18) 46%, rgba(255,236,200,0) 70%);}
#main_page .hero_spark .ray{width:300px; height:2px;
	background:linear-gradient(90deg, rgba(255,247,228,0) 0%, rgba(255,255,255,.92) 50%, rgba(255,247,228,0) 100%);}
#main_page .hero_spark .ray2{width:2px; height:210px;
	background:linear-gradient(180deg, rgba(255,247,228,0) 0%, rgba(255,255,255,.72) 50%, rgba(255,247,228,0) 100%);}
*/

/* [제거 2026-09-07] 슬라이드 진행 바(.hero_nav / .hero_dot). 배경 사진 슬라이드를 걷어내며 함께 없앴다.
   되돌릴 때 아래 주석을 풀고 index.jsp 의 hero_nav 마크업과 슬라이드 스크립트를 함께 살릴 것.
#main_page .hero_nav{position:absolute; left:50%; bottom:56px; z-index:3; display:flex; justify-content:center; gap:12px; width:100%; max-width:1400px; padding:0 20px; box-sizing:border-box; transform:translateX(-50%);}
#main_page .hero_dot{width:48px; height:14px; padding:0; border:0; background:none; cursor:pointer;}
#main_page .hero_dot i{display:block; position:relative; height:2px; background:rgba(255,255,255,.26); overflow:hidden;}
#main_page .hero_dot i:after{content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; transform:scaleX(0); transform-origin:left center;}
#main_page .hero_dot.is_on i:after{animation:hsBar var(--hs-hero-hold, 6.4s) linear forwards;}
@keyframes hsBar{from{transform:scaleX(0)} to{transform:scaleX(1)}}
*/

/* 하단 우측 - 스크롤 유도. 사진 위에 놓이므로 흰 선으로 그린다.
   [흰 바탕이던 시절의 값] em{color:var(--hs-muted)} / i{background:rgba(32,43,40,.16)} / i:after{background:var(--hs-brand)} */
#main_page .hero_scroll{position:absolute; right:40px; bottom:50px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px;}
#main_page .hero_scroll em{font-family:var(--hs-sans); font-size:11px; font-style:normal; font-weight:400; letter-spacing:2.6px; line-height:1; color:rgba(255,255,255,.7); writing-mode:vertical-rl;}
#main_page .hero_scroll i{display:block; position:relative; width:1px; height:56px; background:rgba(255,255,255,.24); overflow:hidden;}
#main_page .hero_scroll i:after{content:''; position:absolute; left:0; top:-56px; width:1px; height:56px; background:#fff; animation:hsScroll 2.4s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes hsScroll{0%{transform:translateY(0)} 60%,100%{transform:translateY(112px)}}

/* ── 연혁 (2026-09-08) ────────────────────────────────────────────────
   원형 영상이 화면 위로 사라지는 순간부터 선이 왼쪽에서 오른쪽으로 뻗어 밤하늘을 가로지르고,
   선이 지나간 자리마다 연도가 차례로 켜진다. 선이 끝까지 뻗은 뒤에는 스크롤을 따라 위로 흘러간다.
   통(.history)은 화면에 고정해 두고 index.jsp 의 draw() 가 세로 이동(translateY)·진하기만 준다 -
   선이 완성되기 전에는 화면 한가운데에 머물고, 완성된 순간의 스크롤 위치를 기준으로 그 뒤부터 함께 올라간다.
   z-index 3 - 어둠(.quote_stage 의 z-index:1 안)보다 위라야 밤하늘 위에 놓인다. */
/* top 은 화면 한가운데(50%)가 아니라 조금 아래다 - 위층 사진이 커서 한가운데에 두면 헤더에 닿는다.
   ⚠ index.jsp 의 HIST_TOP 과 같은 값이어야 한다(스크립트가 선의 화면상 y 를 그 값으로 계산한다). */
/* 어록 구간에서 흐르다가 연혁 선으로 모이는 선 다발(2026-09-09).
   캔버스는 /js/main_hero_lines.js 가 만들어 넣는다. 화면에 고정해 두고 그 안에서 전부 계산하므로
   이 상자는 자리만 잡는다. z-index 는 연혁과 같은 3 - 밤하늘(2) 위에서 선이 이어져야 한다. */
#main_page .flow_lines{position:fixed; left:0; top:0; z-index:3; width:100vw; height:100vh; pointer-events:none;}
#main_page .flow_lines canvas{display:block; width:100%; height:100%;}

/* ── 해성한의원의 발자취 (2026-09-10) ─────────────────────────────────
   밤하늘을 가로지르던 선(.history, 아래 주석)을 걷어내고 그 이야기를 옮겨 온 자리다.
   네 대목을 나란히 세우고, 그에 딸린 사진 넉 장을 화면 좌우를 꽉 채워 섹션 바닥에 붙인다.
   [2026-09-14] 밤하늘을 걷어내면서 밝은 한지 바탕 위 어두운 글자가 기본이 됐다. 예전에 "스크립트가 뜨지 않는
     환경"용 폴백(body:not(.hero_fx) …)으로 두었던 색이 그대로 기본값으로 올라왔다.
     밤하늘 위 흰 글자 시절의 값은 _backup_20260914_hero/main.css 참고. */
/* [높이 조정 2026-09-10] 제목부터 사진 넉 장까지가 한 화면에 다 들어오도록 여백과 글자를 조였다.
   아래 .lg_* 규칙의 값들이 그 몫을 조금씩 나눠 지고 있다 - 한 곳만 되돌리면 다시 넘친다.
   [이전 값] padding:clamp(90px, 13vh, 170px) 0 0
   [크기 조정 2026-09-14] 밤하늘이 없어져 한 화면에 다 넣을 이유가 줄었다 - 글자를 한 단계씩 키웠다(원장님 지시). */
#main_page .legacy{position:relative; z-index:2; padding:clamp(70px, 9vh, 120px) 0 0; background:#f4f2ec;}
/* 머리말 - 참조한 편집물처럼 가운데에 작은 십자 하나를 두고 그 아래 제목을 놓는다.
   십자는 두 개의 선(가로 :before / 세로 :after)으로 그린다 */
#main_page .lg_head{margin-bottom:clamp(30px, 4vh, 46px); text-align:center;}
/* [사용 안 함 2026-09-10] 제목 위 작은 십자. 되돌릴 때 아래 주석과 index.jsp 의 마크업을 함께 살린다.
#main_page .lg_plus{position:relative; display:block; width:18px; height:18px; margin:0 auto clamp(16px, 2.2vh, 24px);}
#main_page .lg_plus:before,
#main_page .lg_plus:after{content:''; position:absolute; left:50%; top:50%; display:block; background:rgba(227,207,166,.55);}
#main_page .lg_plus:before{width:18px; height:1px; margin:0 0 0 -9px;}
#main_page .lg_plus:after{width:1px; height:18px; margin:-9px 0 0;}
*/
/* [크기 조정 2026-09-10] clamp(21px,1.9vw,30px) → 한 단계 키웠다. 위 십자를 걷어내면서
   이 한 줄이 머리말 전부가 됐으니 그만한 무게를 가져야 한다(십자가 비운 높이도 이걸로 메운다).
   [2026-09-14] clamp(26px, 2.6vw, 42px) → 한 번 더. 글자색은 어두운 쪽(밝은 바탕). */
#main_page .lg_head h2{font-family:var(--hs-serif); font-size:clamp(30px, 3.2vw, 52px); font-weight:600;
	letter-spacing:-1px; color:var(--hs-title);}

/* 네 대목 - 위에 가는 선을 한 줄 긋고 그 아래로 번호·제목·시점·설명을 쌓는다.
   ⚠ 칸 수(4)는 legacyList 항목 수와 같아야 한다 - 항목을 늘리면 여기와 .lg_imgs 를 함께 고칠 것. */
/* ⚠ 좌우 여백이 다르다. 오른쪽을 더 두는 것은 화면에 고정된 퀵메뉴(치료후기·상담문의 버튼, layout.css)를
   피하기 위해서다 - 좌우를 같게 두면 넷째 대목의 설명이 그 버튼 뒤로 들어간다.
   사진 띠(.lg_imgs)는 이 여백을 쓰지 않는다 - 좌우를 꽉 채우는 것이 그쪽의 몫이다. */
#main_page .lg_cols{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(22px, 2.6vw, 56px);
	max-width:1560px; margin:0 auto clamp(34px, 4.5vh, 52px);
	padding:0 clamp(20px, 9vw, 170px) 0 clamp(20px, 4vw, 80px); box-sizing:border-box;}
/* [2026-09-14] 색은 밝은 한지 바탕 기준. 글자 크기는 한 단계씩 키웠다.
   [이전 값] lg_title clamp(17px, 1.32vw, 22px) / lg_desc clamp(13px, .88vw, 14.5px) / lg_no·lg_when 12px */
#main_page .lg_col{position:relative; padding-top:clamp(15px, 2vh, 22px); border-top:1px solid #d9d2c2;
	transition:opacity .45s ease;}
/* 대목 위로 그어지는 금색 선 - 스승과 제자 제목의 밑줄, 진료 목록의 줄 밑줄과 같은 획이다 */
#main_page .lg_col:before{content:''; position:absolute; left:0; top:-1px; display:block; width:100%; height:2px;
	background:linear-gradient(90deg, rgba(166,138,100,0) 0%, #c9ad7d 5%, #b08f5c 45%, #c9ad7d 88%, rgba(166,138,100,0) 100%);
	transform:scaleX(0); transform-origin:left center;
	transition:transform .8s cubic-bezier(.28,.66,.32,1);}
#main_page .lg_col.is_on:before{transform:scaleX(1);}
#main_page .lg_no{display:block; margin-bottom:clamp(8px, 1.1vh, 12px);
	font-family:var(--hs-sans); font-size:13px; font-weight:500; letter-spacing:2px; line-height:1; color:#a9997a;}
#main_page .lg_title{font-family:var(--hs-serif); font-size:clamp(20px, 1.6vw, 27px); font-weight:600;
	line-height:1.38; letter-spacing:-.6px; color:var(--hs-title); word-break:keep-all;
	transition:color .4s ease;}
#main_page .lg_when{display:block; margin-top:clamp(7px, 1vh, 11px);
	font-family:var(--hs-sans); font-size:13px; font-style:normal; font-weight:500; letter-spacing:1.6px; color:#8a7c5f;}
#main_page .lg_desc{margin-top:clamp(11px, 1.5vh, 16px);
	font-size:clamp(14.5px, 1.05vw, 17px); font-weight:300; line-height:1.75; letter-spacing:-.2px;
	color:var(--hs-body); word-break:keep-all;}
/* 보고 있는 대목만 남기고 나머지는 뒤로 물러난다 */
#main_page .lg_cols.is_hover .lg_col:not(.is_hot){opacity:.36;}
#main_page .lg_col.is_hot .lg_title{color:var(--hs-brand);}

/* [추가 2026-09-29] 자세한 이야기로 넘기는 한 줄(index.jsp 의 .lg_more).
   메인은 네 대목을 한 줄씩만 보여 주고, 개원 당시 원장·부원장이나 스승님의 이후 같은 이야기는
   역사 페이지(/about/history/index)가 맡는다 - 원장님 지시.
   사진 띠(.lg_imgs) 바로 위에 놓이므로 위 여백은 .lg_cols 의 margin-bottom 이 이미 만들어 둔 것을 쓴다. */
#main_page .lg_more{display:flex; justify-content:center; margin:0 auto clamp(34px, 4.5vh, 52px); padding:0 20px;}
#main_page .lg_more a{display:inline-flex; align-items:center; gap:12px; padding:15px 34px;
	border:1px solid #cfc6b2; background:rgba(255,255,255,.55);
	font-family:var(--hs-sans); font-size:15px; letter-spacing:-.1px; color:var(--hs-title);
	transition:background-color .35s ease, border-color .35s ease, color .35s ease;}
/* 화살표 - 가는 가로선 끝에 갈매기 하나. 사이트의 다른 "더 보기"(진료 상세)와 같은 획이다 */
#main_page .lg_more a i{position:relative; display:block; width:16px; height:1px; background:currentColor;
	transition:transform .35s ease;}
#main_page .lg_more a i:after{content:''; position:absolute; right:0; top:0; width:7px; height:7px; margin-top:-3px;
	border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);}
#main_page .lg_more a:hover{background:var(--hs-brand); border-color:var(--hs-brand); color:#fff;}
#main_page .lg_more a:hover i{transform:translateX(4px);}

/* 사진 넉 장 - 섹션 바닥에 좌우로 꽉 붙는다. .inner 를 쓰지 않는 것이 핵심이다.
   [비율 변경 2026-09-10] 3:4(세로로 긴 것) → 1:1 + 화면 높이 상한.
   세로로 길면 사진만 화면의 6할을 먹어 글과 함께 한눈에 들어오지 않았다.
   max-height 를 함께 두는 이유: 정사각형은 폭을 따라가므로 넓은 화면에서 다시 커진다 -
   화면 높이의 4할로 묶어 두면 어떤 화면에서도 글과 사진이 한 화면에 같이 담긴다
   (그만큼 위아래가 잘리지만 cover 라 가운데가 남는다). */
#main_page .lg_imgs{display:grid; grid-template-columns:repeat(4, 1fr);}
/* ⚠ width:100% 를 빼지 말 것. aspect-ratio 와 max-height 가 부딪히면 브라우저는 비율을 지키려고
   폭까지 줄인다 - 그러면 넉 장 사이에 세로 틈이 생겨 "좌우로 꽉 찬 띠"가 아니게 된다.
   폭을 못 박아 두면 높이만 상한에 맞춰 눌리고 띠는 그대로 이어진다. */
#main_page .lg_img{position:relative; display:block; width:100%; aspect-ratio:1/1; max-height:40vh; overflow:hidden;
	background-repeat:no-repeat; background-position:center center; background-size:cover;
	transition:filter .5s ease, opacity .5s ease, transform .8s cubic-bezier(.22,.61,.36,1);}
/* 가리키지 않은 사진은 한 톤 가라앉는다 - 어느 대목을 보고 있는지 사진 쪽에서도 드러난다 */
#main_page .lg_imgs.is_hover .lg_img:not(.is_hot){filter:grayscale(.55) brightness(.72);}
#main_page .lg_img.is_hot{transform:scale(1.04);}

/* 스크롤 등장 - 대목은 아래에서 떠오르고, 사진은 아래에서 위로 차오른다.
   사진에 clip-path 를 쓰는 이유: 자리를 그대로 둔 채 "채워지는" 느낌을 내려면 옮기는 것이 아니라
   드러내야 한다. 넉 장이 조금씩 어긋난 시점에 차오르면 한 장씩 세워지는 것처럼 읽힌다. */
#main_page .lg_col{opacity:0; transform:translateY(24px);
	transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1);}
#main_page .lg_cols.is_in .lg_col{opacity:1; transform:none;}
#main_page .lg_cols.is_in .lg_col:nth-of-type(1){transition-delay:.05s;}
#main_page .lg_cols.is_in .lg_col:nth-of-type(2){transition-delay:.14s;}
#main_page .lg_cols.is_in .lg_col:nth-of-type(3){transition-delay:.23s;}
#main_page .lg_cols.is_in .lg_col:nth-of-type(4){transition-delay:.32s;}
#main_page .lg_cols.is_in .lg_col:before{transition-delay:.5s;}
#main_page .lg_img{-webkit-clip-path:inset(100% 0 0 0); clip-path:inset(100% 0 0 0);}
#main_page .lg_imgs.is_in .lg_img{-webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0);
	transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1), -webkit-clip-path 1.1s cubic-bezier(.22,.61,.36,1),
		filter .5s ease, transform .8s cubic-bezier(.22,.61,.36,1);}
#main_page .lg_imgs.is_in .lg_img:nth-of-type(1){transition-delay:.05s;}
#main_page .lg_imgs.is_in .lg_img:nth-of-type(2){transition-delay:.15s;}
#main_page .lg_imgs.is_in .lg_img:nth-of-type(3){transition-delay:.25s;}
#main_page .lg_imgs.is_in .lg_img:nth-of-type(4){transition-delay:.35s;}
/* 다 올라온 뒤에는 지연을 지운다 - 남겨 두면 마우스를 올릴 때마다 그만큼 늦게 반응한다 */
#main_page .lg_cols.is_in.is_hover .lg_col,
#main_page .lg_imgs.is_in.is_hover .lg_img{transition-delay:0s;}
/* [제거 2026-09-14] 스크립트가 뜨지 않는 환경용 폴백(body:not(.hero_fx) …) - 그 색이 위 기본값이 됐다 */
@media (prefers-reduced-motion: reduce){
	#main_page .lg_col{opacity:1; transform:none; transition:none;}
	#main_page .lg_col:before{transform:scaleX(1); transition:none;}
	#main_page .lg_img{-webkit-clip-path:none; clip-path:none; transition:none;}
}
/* [사용 안 함 2026-09-10] 아래 .history 규칙 묶음은 밤하늘을 가로지르던 연혁 선의 것이다.
   그 마크업을 걷어내고 밝은 섹션(.legacy, 위)으로 옮겼으므로 지금은 아무 데도 걸리지 않는다.
   되돌릴 때 index.jsp 의 historyList·마크업·스크립트 주석과 함께 살릴 것이라 규칙은 지우지 않고 남겨 둔다. */
#main_page .history{position:fixed; left:0; top:54%; z-index:3; width:100vw; height:0; opacity:0; pointer-events:none;}
/* 길이를 width 로 늘리면 매 프레임 레이아웃을 다시 잡지만, scaleX 는 합성만으로 처리되어 매끄럽다.
   transform-origin:left - "왼쪽에서 뻗어 나온다"를 만드는 값이다.
   양 끝을 투명으로 흐리는 것은 화면 밖에서 잘린 듯 보이지 않게 하려는 것이다. */
/* [색 변경 2026-09-09] 금색 → 흰색. 연도 글자(금색)와 층이 갈려 선이 더 또렷하게 지나간다.
   [이전 값] linear-gradient(90deg, rgba(205,182,139,0) 0%, #cdb68b 5%, #cdb68b 95%, rgba(205,182,139,0) 100%) */
#main_page .history_line{position:absolute; left:0; top:-1px; display:block; width:100%; height:2px;
	background:linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 5%, #fff 95%, rgba(255,255,255,0) 100%);
	transform:scaleX(0); transform-origin:left center;}
/* 항목 자체는 높이가 없는 점이고 left(%) 로만 자리를 잡는다 -
   가로 위치는 index.jsp 가 항목 수로 균등 분배해 인라인 style 로 넣는다.
   폭은 옆 항목과 부딪히지 않는 선에서 잡는다 - 6개 기준 항목 간격이 약 224px(1600px 화면)인데,
   사진 덩어리가 선 위·아래로 번갈아 놓이므로 같은 층끼리는 그 두 배(448px)만큼 떨어진다. */
#main_page .history_item{position:absolute; top:0; width:300px; margin-left:-150px; text-align:center;
	opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);}
#main_page .history_item.is_on{opacity:1; transform:none;}
/* 선 위에 얹히는 점 - 선과 같은 금색, 가운데를 비워 두어 별처럼 보이게 한다. 위/아래 어느 층이든 늘 선 위다 */
#main_page .history_item i{position:absolute; left:50%; top:-4px; z-index:1; width:9px; height:9px; margin-left:-4.5px;
	border:1px solid #cdb68b; border-radius:50%; background:#0a0f18;}
/* 사진·연도·내용 덩어리 - 홀수 항목은 선 위, 짝수 항목은 선 아래에 붙어 지그재그가 된다.
   nth-of-type 을 쓰는 이유: 이 통의 첫 자식은 선(span)이라 nth-child 로 세면 순서가 밀린다.
   어느 쪽이든 사진이 선에 가장 가까이 오도록 두어(홀수는 아래에서 위로, 짝수는 위에서 아래로 읽힌다)
   선을 사이에 둔 두 줄이 대칭으로 보인다. */
#main_page .history_item .hi_body{position:absolute; left:0; right:0;}
#main_page .history_item:nth-of-type(odd) .hi_body{bottom:20px;}
#main_page .history_item:nth-of-type(even) .hi_body{top:20px;}
#main_page .history_item:nth-of-type(even) .hi_body .ph{margin:0 0 14px;}
/* 사진 - 밤하늘 위에 놓이므로 테두리를 옅은 금색으로 둘러 배경과 분리한다.
   aspect-ratio 로 정사각형을 유지한다(폭을 바꾸면 높이가 따라온다).
   ⚠ width 의 30vh 상한이 세로 한계를 지킨다 - 사진 위아래로 연도·내용과 여백이 106px 붙으므로,
     사진이 화면 높이의 3할을 넘으면 위층은 헤더에 닿고 아래층은 화면 밖으로 밀린다.
     화면이 높을수록 사진도 함께 커진다.
   [이전 값] height:132px → width:100%(항목 폭 252px) */
#main_page .history_item .ph{display:block; width:min(100%, 30vh); aspect-ratio:1/1; margin:0 auto 16px; overflow:hidden;
	border:1px solid rgba(205,182,139,.32); background:#0d1420;}
#main_page .history_item .ph img{display:block; width:100%; height:100%; object-fit:cover;}
/* [이전 값 - 사진이 들어오기 전, 연도·내용을 선 위아래에 절대배치하던 시절]
   em{position:absolute; bottom:22px} / span{position:absolute; top:24px} */
#main_page .history_item em{display:block; margin-bottom:6px;
	font-family:var(--hs-serif); font-size:32px; font-style:normal; font-weight:600; letter-spacing:0.5px; color:#e6d3ac;}
#main_page .history_item .tx{display:block;
	font-size:17px; font-weight:400; line-height:1.5; color:rgba(255,255,255,.8); word-break:keep-all;}

/* 어둠 연출이 걸리지 않는 환경에서는 스크립트가 값을 주지 않아 연혁이 흰 바탕에 그대로 남는다 - 아예 숨긴다 */
body:not(.hero_fx) #main_page .history{display:none;}
@media (prefers-reduced-motion: reduce){
	#main_page .history{display:none;}
}

/* ── 치료후기 슬라이드 - 밤하늘이 걷힌 자리에 놓이는 밝은 섹션 (2026-09-08) ──────────────
   [자리 옮김 2026-09-10] 어둠과의 층 다툼은 더 이상 이 섹션의 일이 아니다 - 어둠 밖으로 나왔기 때문이다.
     밤하늘이 걷히며 아래에서 드러나는 자리는 진료 목록(.space)이 넘겨받았다.
   [이전 설명] 어둠(.sky_veil) 아래층에 두어(z-index 를 주지 않아 어둠이 위를 덮게) 어둠이 위로 흘러가며
     아래쪽부터 이 한지 바탕과 후기 카드가 드러나게 했다.
   ⚠ padding-top 이 이 연출의 핵심이다. 어둠의 타원은 어록 중심에서 화면 대각선 × 0.92 × 1.45 만큼
     아래까지 덮으므로(index.jsp 의 draw), 카드가 그 선보다 위에 있으면 어둠에 묻힌 채 지나가 버린다.
     그 길이는 화면 비율마다 다르므로 스크립트가 실제 값을 재서 덮어썼다(지금은 .space 가 그 처리를 받는다).
   배경은 흰색. 다만 다음 섹션(.hero_gallery)은 위쪽 200px 이 한지 톤(#f1eadd)이라, 그대로 맞대면
   경계에 색 단차가 보인다 - 아래 15% 를 그 색으로 넘겨 이음매를 지운다.
   폭은 .inner(1400px)를 쓰지 않고 화면 좌우를 꽉 채운다 - 카드 세 장이 크게 보이는 것이 이 구간의 목적이다. */
/* [자리 옮김 2026-09-10] 후기는 어둠(.quote_wrap) 밖으로 나와 진료 목록 다음에 놓인다.
   어둠이 걷히며 드러나는 자리는 진료 목록(.space)이 넘겨받았고, 그 위쪽 여백은 스크립트(fitAfterSky)가 잡는다.
   그래서 여기 있던 155vh 는 필요 없어졌다 - 어둠을 기다릴 이유가 없으므로 여느 섹션과 같은 여백을 쓴다.
   [이전 값] padding:155vh 0 clamp(90px, 12vh, 160px);
             + body:not(.hero_fx) 일 때만 padding-top:clamp(80px, 12vh, 150px) 로 되돌리던 규칙 */
/* [배경 단순화 2026-09-10] 아래 15% 를 한지 톤(#f1eadd)으로 넘기던 그라데이션을 뺐다.
   그것은 바로 뒤에 오던 섹션(.hero_gallery)의 윗부분이 한지 톤이라 이음매를 지우려던 값인데,
   그 섹션은 지금 숨겨져 있고 후기 다음은 흰색으로 시작하는 오시는 길이다 - 베이지가 남으면
   오히려 후기 아래에만 색 띠가 생겨 다음 섹션과 어긋나 보인다.
   [이전 값] background:linear-gradient(180deg, #fff 0%, #fff 85%, #f1eadd 100%); */
/* [배경 조정 2026-09-10] #f6f5f1 → #fbfaf8 → 그 색을 덮개로 씌운 수채화 그림.
   상담문의 섹션에 있던 그림(banner_01.webp)을 이리로 옮겨 왔다. 다만 그대로 깔면 카드 글씨와 다투므로,
   같은 바탕색을 92% 불투명한 한 겹으로 덮어 그림이 아주 옅게만 비치게 한다 -
   무엇이 그려져 있는지 알아보기보다 "빈 흰 판이 아니다" 정도로 느껴지는 농도다.
   ⚠ 덮개 색은 아래 단색과 같은 값이어야 한다. 다르면 그림이 없는 가장자리에서 색이 갈린다.
   완전한 흰색으로 두지 않는 것은 카드(#fff)가 바탕에 묻히지 않게 하려는 것이다. */
#main_page .review{padding:clamp(80px, 11vh, 140px) 0 clamp(90px, 12vh, 160px);
	background:linear-gradient(rgba(250,250,248,.55), rgba(250,250,248,.55)),
		#fafaf8 url('/img/review_bg_ink.png') no-repeat center center / cover;}

/* ── 흐르는 후기 띠 (2026-09-10) ───────────────────────────────────────
   좌우 화살표로 넘기던 슬라이드를 걷어내고, 두 줄이 서로 반대로 흘러가게 했다.
   넘겨야 볼 수 있는 것과 저절로 흘러가는 것은 읽는 태도가 다르다 - 후기는 훑어보는 자리다.
   ⚠ 한 줄에 카드가 두 벌 들어 있고(index.jsp), 트랙을 정확히 -50% 밀면 두 번째 벌의 첫 장이
     처음 자리에 온다. 그래서 끊긴 데 없이 이어지는 것처럼 보인다 - 한 벌만 두면 절반에서 빈 자리가 생긴다.
   ⚠ 폭은 .inner 를 쓰지 않고 화면을 꽉 채운다. 양 끝이 잘려 나가야 "흘러가는 중"으로 읽힌다.
   흐름은 transform 하나로만 처리되므로 합성만으로 돌아간다(레이아웃을 다시 잡지 않는다). */
#main_page .rv_head{margin-bottom:clamp(40px, 6vh, 70px); text-align:center;}
/* [크기 조정 2026-09-15] 라벨 13px → 15px, 제목 clamp(21px,1.9vw,30px) → 다른 섹션 제목(발자취·진료)과 같은 급으로 */
#main_page .rv_label{display:block; margin-bottom:clamp(16px, 2.2vh, 24px);
	font-family:var(--hs-sans); font-size:15px; font-weight:400; letter-spacing:5px; color:#a9a08c;}
#main_page .rv_head h2{font-family:var(--hs-serif); font-size:clamp(30px, 3.2vw, 52px); font-weight:600;
	letter-spacing:-1px; color:var(--hs-title); word-break:keep-all;}
#main_page .rv_rows{display:flex; flex-direction:column; gap:clamp(14px, 1.8vw, 24px);}
#main_page .rv_row{overflow:hidden;}
/* [2026-09-15] 카드가 두 벌 → 네 벌이 되면서(index.jsp) -50% 이동 거리가 두 배가 됐다.
   체감 속도를 그대로 두려고 재생 시간도 두 배로. [이전 값] 64s / 78s (모바일 48s / 58s) */
#main_page .rv_track{display:flex; gap:clamp(14px, 1.8vw, 24px); width:max-content;
	animation:rvFlow 128s linear infinite;}
/* 아래 줄은 반대 방향으로, 조금 다른 속도로 - 같은 박자면 두 줄이 한 덩어리처럼 움직인다 */
#main_page .rv_row2 .rv_track{animation-duration:156s; animation-direction:reverse;}
/* 읽고 싶은 것이 지나가 버리지 않게, 마우스를 올리면 두 줄 다 멈춘다.
   .is_off 는 이 띠가 화면 밖에 있을 때 스크립트가 붙인다 - 보이지 않는 동안은 돌지 않는다. */
#main_page .rv_rows:hover .rv_track,
#main_page .rv_rows.is_off .rv_track{animation-play-state:paused;}
@keyframes rvFlow{ from{transform:translate3d(0, 0, 0);} to{transform:translate3d(-50%, 0, 0);} }

#main_page .rv_card{flex:0 0 auto; box-sizing:border-box;
	display:flex; flex-direction:column; width:clamp(258px, 21vw, 330px);
	padding:clamp(22px, 1.8vw, 30px) clamp(20px, 1.7vw, 28px);
	border:1px solid #e9e6dd; border-radius:14px; background:#fff;
	transition:border-color .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);}
#main_page .rv_card:hover{border-color:#ddd6c6; box-shadow:0 12px 30px rgba(60,48,30,.07); transform:translateY(-4px);}
#main_page .rv_star{display:block; margin-bottom:clamp(10px, 1.4vh, 14px);
	font-size:13px; letter-spacing:2px; line-height:1; color:#e03131;}
/* 글 길이가 달라도 카드 높이는 한 줄로 맞춘다 - 흐르는 띠에서 높이가 들쭉날쭉하면 어수선하다 */
#main_page .rv_txt{flex:1 1 auto; min-height:calc(1.72em * 4);
	font-size:clamp(14px, .98vw, 15.5px); font-weight:400; line-height:1.72; letter-spacing:-.2px;
	color:var(--hs-title); word-break:keep-all;}
#main_page .rv_by{display:flex; align-items:center; gap:10px; margin-top:clamp(16px, 2vh, 22px);}
/* 아바타 자리 - 작성자의 첫 글자를 담은 원 */
#main_page .rv_ava{flex:0 0 auto; display:flex; align-items:center; justify-content:center;
	width:30px; height:30px; border-radius:50%; background:#eee9dd;
	font-family:var(--hs-sans); font-size:13px; font-weight:500; color:#8a7c5f;}
#main_page .rv_by em{font-family:var(--hs-sans); font-size:12.5px; font-style:normal; font-weight:400;
	letter-spacing:.2px; color:var(--hs-grey);}
@media (prefers-reduced-motion: reduce){
	/* 움직임을 줄이는 설정에서는 흐르지 않는다 - 대신 첫 벌만 보이도록 넘치는 부분을 잘라 둔다 */
	#main_page .rv_track{animation:none;}
}

/* 카드가 아래에서 위로 쭉 밀려 올라오는 등장. 공통 .reveal(24px 이동)보다 이동 폭이 훨씬 크고,
   화면에 3분의 2쯤 걸친 순간에 시작한다(index.jsp 의 IntersectionObserver, threshold 0.66).
   will-change 없이도 transform·opacity 만 쓰므로 합성만으로 처리된다. */
#main_page .review_rise{opacity:0; transform:translateY(180px);
	transition:opacity .7s ease, transform 1.05s cubic-bezier(.16,.84,.44,1);}
#main_page .review_rise.is_up{opacity:1; transform:none;}
#main_page .review_rise.d1{transition-delay:.14s;}
@media (prefers-reduced-motion: reduce){
	#main_page .review_rise{opacity:1; transform:none; transition:none;}
}

/* [제거 2026-09-08 - 섹션 제목. 되돌릴 때 아래 세 줄의 주석을 풀고 index.jsp 의 .review_head 마크업을 살린 뒤,
   아래 .review_swiper 의 margin-top(제목이 비운 자리를 대신 채우는 여백)을 지울 것]
#main_page .review_head{margin:0 0 clamp(40px, 6vh, 70px); text-align:center;}
#main_page .review_head .label{display:block; margin-bottom:16px; font-family:var(--hs-sans); font-size:13px; font-weight:500; letter-spacing:2.86px; color:var(--hs-accent);}
#main_page .review_head h2{font-family:var(--hs-serif); font-size:clamp(28px, 3vw, 44px); font-weight:600; letter-spacing:-0.5px; color:var(--hs-title);}
*/

/* 카드 세 장이 화면 좌우로 넓게 놓인다. 좌우 여백은 카드가 화면 끝에 붙지 않을 만큼만 준다.
   ⚠ 우측 여백은 화면에 고정된 퀵메뉴(치료후기·상담문의 버튼, layout.css)를 피할 만큼은 있어야 한다 -
     여백이 좁으면 세 번째 카드의 글자가 그 버튼에 가린다. 100px 이면 카드 안쪽 패딩과 합쳐 글자까지는 닿지 않는다.
   overflow 는 Swiper 가 .swiper 에 hidden 을 걸어 주므로 따로 지정하지 않는다.
   margin-top - 지운 섹션 제목이 차지하던 높이를 그대로 재현한 값이다(라벨 32px + 제목 글자높이 + 아래 여백).
     제목을 되살릴 때는 이 줄을 지운다.
   위아래 24px 패딩 - 카드가 hover 로 8px 떠오를 때 Swiper 의 overflow:hidden 에 윗머리가 잘리는 것을 막는다.
     margin-top 에서 그 24px 을 빼 두어 카드 위치는 제목이 있을 때와 같다. */
#main_page .review_swiper{box-sizing:border-box;
	margin-top:calc(32px + clamp(28px, 3vw, 44px) * 1.4 + clamp(40px, 6vh, 70px) - 24px);
	padding:24px clamp(16px, 6vw, 100px);}
/* 글 길이가 달라도 카드 높이는 한 줄로 맞춘다 - 슬라이드가 늘어나고 카드가 그 높이를 채운다 */
#main_page .review_swiper .swiper-slide{height:auto;}

/* 정사각형에 가까운 큰 카드. aspect-ratio 로 폭에 맞춰 높이가 따라오되, 글이 길어 넘칠 때를 대비해
   min-height 는 두지 않고 height:auto 로 늘어나게 둔다(슬라이드 높이는 위에서 auto 로 맞춘다). */
/* [크기 조정 2026-09-10] 넓은 화면에서 카드를 석 장 → 넉 장으로 늘리면서(index.jsp 의 Swiper breakpoints)
   카드 폭이 한 뼘씩 줄었다. 안쪽 여백과 글자를 함께 줄이지 않으면 글줄이 한 줄에 열 자 남짓밖에
   들어가지 않아 카드가 세로로 길쭉해진다.
   [이전 값] padding:clamp(34px, 3.2vw, 56px) clamp(30px, 2.8vw, 48px) */
/* [높이 조정 2026-09-10] aspect-ratio 를 뺐다.
   ⚠ 여기서 aspect-ratio 는 "최소 높이"가 아니라 높이 그 자체였다 - height:100% 와 맞물려
     슬라이드 높이까지 그 값으로 정해지는 바람에, 비율만 줄이면 긴 후기가 카드 밖으로 흘러넘쳤다
     (넉 장 중 다섯 줄짜리 두 장의 작성자 줄이 카드 아래로 빠져나왔다).
   그래서 높이는 글에 맡기고, 세로를 줄이는 몫은 아래 여백·글자 크기가 나눠 진다
   (padding·인용부호·별점 여백·본문 행간·작성자 줄 여백을 조금씩 줄였다 - 합쳐서 50px 남짓).
   min-height 는 후기가 아주 짧을 때 카드가 납작해지지 않게 잡아 두는 바닥값이다.
   [이전 값] aspect-ratio:1/1 (정사각형) → 10/9 (넘침) → 없음 */
#main_page .review_card{display:flex; flex-direction:column; height:100%; box-sizing:border-box;
	min-height:clamp(240px, 18vw, 300px);
	padding:clamp(20px, 1.6vw, 28px) clamp(22px, 1.9vw, 32px);
	/* 거의 흰 카드. 흰 바탕과의 구분은 그림자가 아니라 테두리가 맡는다
	   [이전 값 - 한 톤 따뜻한 아이보리] background:#faf6ed; border-color:#e8dfcd;
	   [제거 2026-09-08 - 카드 뒤 그림자] box-shadow:0 18px 40px rgba(60,48,30,.08); */
	/* [이전 - 둥근 모서리] border-radius:24px; */
	border:1px solid #e6ddca; background:#fffefb;
	transition:transform .5s cubic-bezier(.22,.61,.36,1);}
/* hover 는 살짝 떠오르는 것만 - 테두리 색은 그대로 둔다
   [이전 - 되돌릴 때 아래를 hover 규칙에 되살리고 위 transition 에 border-color .4s ease 를 다시 넣을 것]
   border-color:var(--hs-gold); */
#main_page .review_card:hover{transform:translateY(-8px);}
/* 아래 다섯 규칙의 크기도 넉 장 배치에 맞춰 한 단계씩 줄였다(2026-09-10).
   [이전 값] mark clamp(56px,5vw,78px) / star 17px·자간 4px·여백 clamp(18px,2.4vh,28px) 0 clamp(16px,2vh,24px)
             / txt clamp(17px,1.28vw,22px)·line-height 1.78
             / by margin-top clamp(22px,3vh,34px)·padding-top clamp(18px,2.4vh,26px)
             / by strong clamp(16px,1.1vw,19px) / by span clamp(14px,.95vw,16px) */
#main_page .review_mark{display:block; font-family:var(--hs-serif); font-size:clamp(34px, 2.8vw, 46px); line-height:.7; color:rgba(166,138,100,.32);}
/* 별점은 빨강 - 후기에서 가장 먼저 눈에 들어오는 표시다 [이전 색 - 금색] color:var(--hs-gold); */
#main_page .review_star{display:block; margin:clamp(10px, 1.3vh, 15px) 0 clamp(9px, 1.2vh, 14px); font-size:15px; letter-spacing:3px; line-height:1; color:#e03131;}
/* 후기 본문 - 이 구간에서 가장 크게 읽히는 글이다.
   flex:1 - 카드마다 글 길이가 달라도 작성자 줄은 항상 카드 아래쪽에 붙는다 */
#main_page .review_txt{flex:1 1 auto; font-size:clamp(15px, 1.06vw, 18px); font-weight:500; line-height:1.64; letter-spacing:-0.3px; color:var(--hs-title); word-break:keep-all;}
#main_page .review_by{margin-top:clamp(12px, 1.6vh, 18px); padding-top:clamp(11px, 1.4vh, 16px); border-top:1px solid #e7dfd0;}
#main_page .review_by strong{margin-right:8px; font-size:clamp(15px, .95vw, 17px); font-weight:700; color:var(--hs-ink);}
#main_page .review_by span{font-size:clamp(13px, .82vw, 14px); font-weight:400; color:var(--hs-grey);}

/* 좌우 이동 버튼 - 카드 아래 가운데. board.css 등 레거시 공통 button 규칙이 새어 들어오지 않도록
   테두리·배경·여백을 모두 명시한다. */
#main_page .review_nav{display:flex; justify-content:center; gap:16px; margin-top:clamp(34px, 4.5vh, 56px);}
#main_page .review_nav button{display:flex; align-items:center; justify-content:center; width:54px; height:54px; padding:0; margin:0;
	border:1px solid rgba(60,48,30,.28); border-radius:50%; background:none; cursor:pointer; -webkit-appearance:none; appearance:none;
	transition:border-color .35s ease, background .35s ease;}
#main_page .review_nav button:hover{border-color:var(--hs-ink); background:rgba(255,255,255,.7);}
/* Swiper 가 양끝에서 비활성으로 표시하는 상태(loop 를 끄면 쓰인다) */
#main_page .review_nav button.swiper-button-disabled{opacity:.3; cursor:default;}
#main_page .review_nav button i{display:block; width:11px; height:11px; border-top:1px solid var(--hs-ink); border-right:1px solid var(--hs-ink);}
#main_page .review_prev i{transform:rotate(-135deg); margin-left:4px;}
#main_page .review_next i{transform:rotate(45deg); margin-right:4px;}

/* 움직임을 줄이도록 설정한 사용자 - 스크롤 선을 멈춘다.
   [제거 2026-09-14] 어둠(.hero_sky / .side_copy / .quote_after)을 끄던 줄 - 그 요소들 자체를 걷어냈다 */
@media (prefers-reduced-motion: reduce){
	#main_page .hero_scroll i:after{animation:none; top:0;}
	/* 첫 화면 이야기 - 그려지는 움직임만 걷어내고 글자는 그대로 보이게 둔다
	   (기본 상태가 "다 그려진 모습"이라 animation 만 끄면 된다) */
	#main_page .hero_chapter.is_on .hc_era,
	#main_page .hero_chapter.is_on .hc_title .ln,
	#main_page .hero_chapter.is_on .hc_desc{animation:none;}
	#main_page .hero_story.is_last .hero_sign_l{animation:none; opacity:1;}
}

/* --------------------------------------------------------------------------
   2. 한방주치의 철학 (문구는 이미지에 포함 - .sr_only 로 텍스트 제공)
   -------------------------------------------------------------------------- */
/* 문구·소나무·먹번짐이 한 장에 다 들어간 이미지(haesung_main_img01.png, 원본 3802x1088).
   문구가 이미지 안에 있으므로 별도 텍스트/베일을 얹지 않는다 - 얹으면 문구가 뿌옇게 눌린다.
   aspect-ratio 는 원본 비율과 일치시킬 것 - 어긋나면 cover 로 확대되어 문구가 잘린다.
   width:100% 도 필수 - aspect-ratio 는 양방향이라 min-height 를 주면 폭까지 늘어나 가로 스크롤이 생긴다. */
/* [이전 버전 - 되돌릴 때 아래 1줄을 살리고 현재 1줄을 지운다. 640px 블록의 quote 배경 규칙도 함께 되돌릴 것] 소나무·먹번짐 배경(3802x1088)
#main_page .quote{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:3802/1088; min-height:300px; background:url('/img/haesung_main_img01.webp') no-repeat center center / cover;}
*/
/* [이전 버전 - 문구가 박힌 배경 이미지 한 장을 통째로 깔던 섹션. 2026-08-26 카드 갤러리로 교체하며 마크업(.quote)도 함께 제거됐다.
   되돌릴 때 아래 3줄과 640px 블록의 quote 규칙, index.jsp 의 section.quote 를 함께 살릴 것]
#main_page .quote{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:2020/645; min-height:300px; background:url('/img/haesung_main_img01_v2.webp') no-repeat center center / cover;}
#main_page .quote_box{position:relative; z-index:1; width:100%; padding:0 20px; box-sizing:border-box; text-align:center;}
#main_page .quote_box img{display:block; width:100%; max-width:640px; height:auto; margin:0 auto;}
*/

/* --------------------------------------------------------------------------
   2. 해성의 가치 (main_hero_img04 · main_hero_02 카드)
   -------------------------------------------------------------------------- */
/* 카드(테두리·흰 박스·그림자)로 감싸지 않고 섹션 바탕에 그림을 그대로 얹는다.
   두 그림 모두 배경이 투명한 일러스트라, 아래쪽만 마스크로 흐려 바탕에 스며들게 하면
   경계 없이 한 장면처럼 이어진다. 문구는 그림 아래 가운데 정렬. */
/* 위쪽 200px 은 .hero_wrap 의 단색에서 한지로 서서히 넘어간다 - 히어로가 원형으로 닫힌 자리와 이어 붙이는 층.
   [이전 버전] background:url('/img/bg_img_01.png') no-repeat center center / cover; */
#main_page .hero_gallery{padding:150px 0 160px; background:linear-gradient(180deg, #f1eadd 0%, rgba(241,234,221,0) 200px), url('/img/bg_img_01.png') no-repeat center center / cover;}
#main_page .gallery_head{margin-bottom:60px; text-align:center;}
#main_page .gallery_head .label{display:block; margin-bottom:16px; font-size:13px; font-weight:500; letter-spacing:2.86px; line-height:1; color:var(--hs-accent);}
#main_page .gallery_head h2{font-family:var(--hs-serif); font-size:42px; font-weight:600; line-height:1.4; letter-spacing:-0.5px; color:var(--hs-title); word-break:keep-all;}
#main_page .gallery_head p{margin-top:18px; font-size:17px; line-height:1.8; color:var(--hs-body); word-break:keep-all;}
/* 사제동행 - 왼쪽은 배우던 시절, 오른쪽은 오늘. 가운데 헤어라인으로 두 시간을 나란히 놓는다 */
#main_page .gallery_grid{position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:48px;}
#main_page .gallery_grid:before{content:''; position:absolute; left:50%; top:8%; bottom:8%; width:1px;
	background:linear-gradient(180deg, rgba(166,138,100,0) 0%, rgba(166,138,100,.35) 50%, rgba(166,138,100,0) 100%);}
#main_page .gallery_card{text-align:center;}
#main_page .gallery_card .epoch{display:inline-block; margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid rgba(166,138,100,.5);
	font-size:12px; font-weight:500; letter-spacing:2.4px; color:var(--hs-gold);}
/* 그림을 큼지막하게 - 카드 폭(약 650px)에 닿지 않는 선에서 높이를 키운다 [이전 430px] */
#main_page .gallery_card .img_box{display:flex; align-items:flex-end; justify-content:center; height:560px;}
/* 높이를 100% 로 맞춰야 세로형(02)과 가로형(03)이 시각적으로 비슷한 크기로 선다.
   하단 18% 는 서서히 사라지게 해 바닥에 잘린 단면이 보이지 않게 한다. */
#main_page .gallery_card .img_box img{display:block; width:auto; height:100%; max-width:100%; object-fit:contain; object-position:bottom center;
	-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
	        mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);}
/* 오른쪽('오늘', main_hero_02_card) 그림은 인물이 상반신 클로즈업이라, 왼쪽과 같은 높이로 두면 더 커 보인다.
   높이만 살짝 줄여 두 인물의 체감 크기를 맞춘다(2026-08-27). % 라서 1024·640 축소 높이에도 그대로 따라간다.
   translateY 는 줄어든 만큼 내려앉아 보이는 위치를 살짝 끌어올리는 보정(밑단은 이미 마스크로 사라져 떠 보이지 않는다).
   ⚠ gallery_grid 의 좌우 순서를 다시 바꾸면 이 규칙의 대상(.d2)도 함께 옮길 것. */
#main_page .gallery_card.d2 .img_box img{height:90%; transform:translateY(-4%);}
/* board.css 의 레거시 공통 규칙(.text_box{border-top/bottom:1px solid #e1e3e4})이 새어 들어온다.
   아래쪽 선만 걷어낸다(위쪽 선은 '그 시절/오늘' 라벨과 맞물려 그대로 둔다). */
#main_page .gallery_card .text_box{margin-top:20px; padding:0 30px; border-bottom:0;}
#main_page .gallery_card .text_box h3{margin-bottom:14px; font-family:var(--hs-serif); font-size:25px; font-weight:600; letter-spacing:-0.3px; color:var(--hs-title);}
#main_page .gallery_card .text_box p{font-size:16px; line-height:1.8; color:var(--hs-body); word-break:keep-all;}

/* --------------------------------------------------------------------------
   3. 공간 소개
   -------------------------------------------------------------------------- */
/* 사진을 전면 배경으로 깔고 어둡게 눌러, 그 위에 인증 카드를 띄운다. */
/* [이전 버전 - space_photo.webp 를 fixed 패럴랙스로 깔던 상태.
   background-attachment:fixed = 스크롤 시 배경만 멈춰 보이는 연출(모바일 미지원)]
#main_page .space{padding:210px 20px; background:#1a1a1a url('/img/main/space_photo.webp') no-repeat center center / cover; background-attachment:fixed;}
#main_page .space_veil{position:absolute; inset:0; background:rgba(15,15,15,.75);}
*/
/* [이전 버전 - 이미지 없이 어두운 그라데이션만 쓰던 상태]
#main_page .space{padding:210px 20px; background:radial-gradient(120% 100% at 50% 0%, #262626 0%, var(--hs-ink) 55%, #101010 100%);}
*/
/* [이전 버전 - 흰 바탕에 인물 그림 두 장을 깔고 어두운 오버레이로 덮던 상태. 되돌릴 때 아래 5줄을 살리고 현재 2줄을 지운다]
#main_page .space{padding:210px 20px;
	background:url('/img/main_hero_03.webp') no-repeat left 2% bottom / auto 56%,
		url('/img/main_hero_02_fade.webp') no-repeat right -2% bottom / auto 70%,
		#fff;}
#main_page .space_veil{position:absolute; inset:0; background:rgba(16,16,16,.88);}
*/
/* [이전 버전 - 되돌릴 때 아래 2줄을 살리고 현재 2줄을 지운다] 배경 그림 없이 어두운 톤만 남겨두던 상태(2026-08-26)
#main_page .space{position:sticky; top:var(--hs-header-h); z-index:1; height:calc(100vh - var(--hs-header-h)); display:flex; align-items:center; justify-content:center; padding:0 20px; background:radial-gradient(120% 100% at 50% 0%, #262626 0%, var(--hs-ink) 55%, #101010 100%); box-sizing:border-box;}
#main_page .space_veil{display:none;}
*/
/* [이전 버전 - 어두운 한약재 정물 사진을 깔던 상태. 되돌릴 때 아래 2줄을 살리고 현재 2줄을 지운다]
#main_page .space{position:sticky; top:var(--hs-header-h); z-index:1; height:calc(100vh - var(--hs-header-h)); display:flex; align-items:center; justify-content:center; padding:0 20px; background:#1a1a1a url('/img/wwweqe.png') no-repeat center center / cover; box-sizing:border-box;}
#main_page .space_veil{position:absolute; inset:0; background:rgba(15,15,15,.72);}
*/
/* 햇살 든 한방 소품 사진(main_certifi_bg1.png)을 전면 배경으로 깔고 오버레이로 눌러 인증 카드를 띄운다(2026-08-27).
   섹션 자체가 sticky 로 붙어 있으므로 background-attachment:fixed 는 쓰지 않는다(모바일 미지원 + 중복 연출).
   ⚠ 베일 농도 .6 - 사진이 밝은 베이지라 이전(.72)만큼 누르면 사진이 거의 안 보이고,
     더 낮추면 밝은 글자(--hs-on-brand)와 대비가 떨어진다. 배경을 또 바꾸면 이 값도 함께 조정할 것. */
/* [2026-09-08] sticky 해제 - 이 섹션이 화면에 붙어 있고 그 위로 다음 섹션(.care)이 미끄러져 올라오는
   연출을 걷어냈다. 이제 두 섹션이 그냥 차례로 이어진다.
   되돌릴 때 아래 한 줄을 살리고 현재 규칙을 지울 것(높이를 화면에 맞추던 값이라 padding 도 0 20px 로 함께 되돌린다)
#main_page .space{position:sticky; top:var(--hs-header-h); z-index:1; height:calc(100vh - var(--hs-header-h)); display:flex; align-items:center; justify-content:center; padding:0 20px; background:#1a1a1a url('/img/main_certifi_bg1.png') no-repeat center center / cover; box-sizing:border-box;} */
/* [z-index 되돌림 2026-09-10] 0 → 2. 어둠(.sky_veil) 아래층에 두었더니, 섹션이 화면에 들어오는 동안
   아직 남아 있는 어둠에 눌려 첫머리가 한 번 어둡게 비쳤다가 밝아졌다.
   배경이 사진이던 시절에는 그 눌림이 "밤하늘에서 드러나는" 연출이었지만, 짙은 먹색 단색이 된 뒤로는
   어둠과 색이 비슷해 눌릴 이유가 없다 - 위층으로 올리면 처음부터 제 색으로 나온다.
   위쪽 여백은 스크립트(index.jsp 의 fitAfterSky)가 어둠이 걷히는 시점에 맞춰 덮어쓴다 -
   아래 150px 은 그 스크립트가 뜨지 않을 때를 위한 값이다. */
/* [배경 변경 2026-09-10] 햇살 든 한방 소품 사진 + 어두운 오버레이 → 짙은 먹색 단색.
   카드마다 사진이 들어오면서 배경에까지 사진을 깔 이유가 없어졌다 - 사진 위에 사진을 얹으면
   어느 쪽도 제대로 보이지 않는다. 밤하늘(#070b12)보다 한 톤 밝게 잡아, 어둠이 걷힌 뒤에도
   앞 장면과 이어지되 층이 갈리게 한다.
   [이전 값] background:#1a1a1a url('/img/main_certifi_bg1.png') no-repeat center center / cover; */
/* [배경 변경 2026-09-14] 짙은 먹색(#12161d) → 흰색. 밤하늘이 없어져 "어두운 데서 어두운 데로" 이어 줄 이유가
   사라졌고, 원장님 지시로 메인 전체를 밝은 톤으로 맞춘다. 앞 발자취(한지 #f4f2ec)·뒤 후기와 층이 갈리게 흰색.
   글자색도 함께 어두운 쪽으로(아래 .space_head). index.jsp 의 헤더 판정에서 이 섹션을 어두운 섹션으로 보던 처리도 뺐다. */
#main_page .space{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:150px 20px; background:#fff; box-sizing:border-box;}
/* 배경이 단색이 되면서 덮을 것이 없어졌다(되돌릴 때 이 한 줄을 지운다) */
#main_page .space_veil{display:none;}
/* [사용 안 함 2026-09-10] 배경 사진을 덮던 오버레이. 배경이 단색이 되면서 덮을 것이 없어졌다.
   [이전 값] .6 → .76 (사진의 꽃·약재가 글자와 경쟁해 한 겹 더 눌렀던 값) */
#main_page .space_veil{position:absolute; inset:0; background:rgba(12,13,17,.76);}
#main_page .space .inner{position:relative; z-index:2; width:100%;}

/* [이전 값 - 카드 위에 설명 줄(.space_desc)이 들어오기 전] margin-bottom:70px; */
#main_page .space_head{margin-bottom:clamp(44px, 6vh, 76px); text-align:center;}
/* 카드에 마우스를 올렸을 때 그 진료의 설명이 나타나는 자리(2026-09-08).
   min-height 로 빈 상태에서도 자리를 지킨다 - 그러지 않으면 글이 뜰 때마다 카드가 아래로 밀린다.
   글자를 지우지 않고 흐리게만 하므로(스크립트) 사라질 때 문장이 끊겨 보이지 않는다. */
#main_page .space_desc{min-height:52px; margin:0 auto 30px; max-width:760px; text-align:center;
	font-size:17px; font-weight:300; line-height:1.6; color:rgba(255,255,255,.84); word-break:keep-all;
	opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease;}
#main_page .space_desc.is_on{opacity:1; transform:none;}
#main_page .space_head .label{display:block; margin-bottom:14px; font-size:13px; font-weight:500; letter-spacing:2.86px; color:#e2eee9;}
/* [개편 2026-09-10] 제목(h2)이 새로 들어오면서 기존 한 줄(p)은 그 아래 부제로 내렸다.
   [이전 값] p{font-family:var(--hs-serif); font-size:32px; font-weight:600; line-height:1.4; color:var(--hs-on-brand);}
   글자 크기는 clamp 로 화면을 따라가므로, 아래 미디어쿼리에 있던 p 크기 지정(28/26/21px)은 함께 지웠다. */
/* [2026-09-14] 흰 바탕 위 어두운 글자. 크기도 한 단계 키웠다. [이전 값] h2 clamp(28px,3vw,48px) #fff / p clamp(15px,1.1vw,18px) 흰 66% */
#main_page .space_head h2{font-family:var(--hs-serif); font-size:clamp(30px, 3.4vw, 54px); font-weight:600;
	line-height:1.34; letter-spacing:-1px; color:var(--hs-title); word-break:keep-all;}
#main_page .space_head p{margin-top:clamp(13px, 1.8vh, 20px);
	font-family:var(--hs-sans); font-size:clamp(16px, 1.25vw, 20px); font-weight:300; line-height:1.7;
	letter-spacing:-.2px; color:var(--hs-body); word-break:keep-all;}

/* [이전 버전 - 되돌릴 때 아래 6줄을 살리고 현재 2줄을 지운다. index.jsp 의 cert_card 마크업(KDA 로고/제목/문구/직인)과
   1024px·640px 미디어쿼리 안의 cert_card 규칙도 함께 살릴 것] CSS 로 그린 종이 카드
#main_page .cert_card{position:relative; width:100%; max-width:600px; margin:0 auto; padding:88px 50px; box-sizing:border-box; text-align:center; background:rgba(253,251,247,.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 20px 50px rgba(0,0,0,.4); border-radius:2px;}
#main_page .cert_card:after{content:''; position:absolute; top:15px; left:15px; right:15px; bottom:15px; border:1px solid #c5a880; opacity:.4; pointer-events:none;}
#main_page .cert_logo{display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 auto 24px; border:1px solid #c5a880; border-radius:50%; font-size:14px; letter-spacing:1px; color:#c5a880;}
#main_page .cert_card h3{margin-bottom:20px; font-family:var(--hs-serif); font-size:32px; font-weight:400; letter-spacing:-0.5px; color:#222;}
#main_page .cert_card p{margin-bottom:40px; font-size:17px; line-height:1.7; color:var(--hs-grey); word-break:keep-all;}
#main_page .cert_seal{display:flex; align-items:center; justify-content:center; width:65px; height:65px; margin:0 auto; border:2px solid #b03a2e; border-radius:4px; font-family:var(--hs-serif); font-size:17px; line-height:1.2; color:#b03a2e; opacity:.8; transform:rotate(-3deg);}
   [1024px 블록] #main_page .cert_card{padding:64px 28px;} / h3{font-size:26px;} / p{margin-bottom:32px; font-size:16px;}
   [640px 블록]  #main_page .cert_card{padding:44px 22px;} / h3{font-size:23px;} / :after{top:10px; left:10px; right:10px; bottom:10px;}
*/
/* [이전 버전 - 이 자리에 우수 한의원 인증서 이미지가 있었다(certificate.png).
   되돌릴 때 아래 두 줄과 index.jsp 의 .cert_card 마크업을 살리고 .space_cards/.space_bgs 를 지울 것.
#main_page .cert_card{position:relative; width:100%; max-width:640px; margin:0 auto; text-align:center;}
#main_page .cert_card img{display:block; width:100%; height:auto;}
*/

/* 진료 카드 - 마우스를 올리면 그 진료 사진이 섹션 배경으로 떠오른다(2026-09-08).
   배경 장들은 카드 수만큼 미리 깔아 두고 스크립트가 해당 장에만 .is_on 을 붙인다.
   쌓임 순서: 배경(0) → 어두운 베일(그 다음, z-index 없이 DOM 순서로 위) → 본문 .inner(2). */
#main_page .space_bgs{position:absolute; inset:0; z-index:0; overflow:hidden;}
#main_page .space_bg{position:absolute; inset:0; background-repeat:no-repeat; background-position:center center; background-size:cover;
	opacity:0; transform:scale(1.05); transition:opacity .7s ease, transform 1.3s cubic-bezier(.22,.61,.36,1);}
#main_page .space_bg.is_on{opacity:1; transform:scale(1);}

/* [이전 버전 2026-09-10까지 - 사진 카드 다섯 장을 한 줄에 늘어놓던 구성.
   작은 카드에서는 사진도 이름도 제대로 읽히지 않고, 어느 한의원에나 있는 진료 아이콘 줄처럼 보였다.
   되돌릴 때 아래 주석을 풀고 .space_list 이하를 지운 뒤, index.jsp 의 이전 마크업·스크립트 주석도 함께 살릴 것.
#main_page .space_cards{display:grid; grid-template-columns:repeat(5, 1fr); gap:18px;}
#main_page .space_card{position:relative; display:block; overflow:hidden; background:#0e131b;}
#main_page .space_card .img{display:block; width:100%; aspect-ratio:4/3;
	background-repeat:no-repeat; background-position:center center; background-size:cover;
	transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .35s ease;}
#main_page .space_card:before{content:''; position:absolute; left:0; right:0; bottom:0; height:58%; z-index:1;
	background:linear-gradient(180deg, rgba(8,12,18,0) 0%, rgba(8,12,18,.62) 100%); transition:opacity .35s ease;}
#main_page .space_card em{position:absolute; left:0; right:0; bottom:16px; z-index:2;
	font-family:var(--hs-sans); font-size:17px; font-weight:500; font-style:normal; letter-spacing:0.3px; text-align:center; color:#fff;}
#main_page .space_card:hover .img{transform:scale(1.07);}
#main_page .space_cards.is_hover .space_card:not(:hover) .img{opacity:.5;}
*/

/* ── 진료 목록 (2026-09-10) ───────────────────────────────────────────
   화면을 가로지르는 다섯 줄. 이름을 크게 세우고 한자를 곁들여 한 줄 한 줄이 제 무게를 갖게 한다.
   사진은 없앤 것이 아니라 자리를 옮겼다 - 한 줄에 마우스를 올리면 그 진료 사진이 섹션 배경으로
   크게 떠오른다(.space_bg). 작게 다섯 장 대신 크게 한 장이다.
   줄 아래로 그어지는 금색 선은 가로 구간 제목의 밑줄(.uline)과 같은 획·같은 색이다 -
   두 구간이 같은 말씨를 쓰게 해서 사이트가 한 덩어리로 읽히게 하는 장치다. */
/* ── 진료 모자이크 (2026-09-10) ────────────────────────────────────────
   크기가 다른 카드를 짜 맞춘 판. 큰 카드와 작은 카드를 섞으면 같은 넓이에서도 눈이 머무는 곳이 생긴다.
   ⚠ 4열 두 줄 = 여덟 칸이고 진료가 여섯이라, 첫 장과 마지막 장이 두 칸을 쓰면(.sp_wide) 2+1+1 / 1+1+2.
     [2026-09-21] 진료가 다섯이던 때 남는 칸을 메우던 브랜드 타일(.sp_brand)은 index.jsp 에서 뺐다(원장님 지시).
     아래 .sp_brand 규칙은 되돌릴 때를 위해 남겨 둔다.
   ⚠ grid-auto-rows 로 행 높이를 못 박는 것이 핵심이다. 카드에 aspect-ratio 를 주면
     두 칸짜리가 두 배로 높아져 두 줄이 어긋난다.
   칸 사이는 3px 만 둔다 - 참조한 편집물처럼 판 하나가 조각난 모양이라야 모자이크로 읽힌다. */
#main_page .space_grid{display:grid; grid-template-columns:repeat(4, 1fr);
	grid-auto-rows:clamp(190px, 21vw, 310px); gap:3px;}
#main_page .sp_card{position:relative; display:block; overflow:hidden; background:#0e131b;
	transition:opacity .45s ease;}
#main_page .sp_wide{grid-column:span 2;}
#main_page .sp_img{position:absolute; inset:0; display:block;
	background-repeat:no-repeat; background-position:center center; background-size:cover;
	transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .5s ease;}
/* 이름이 사진 위에서도 읽히도록 왼쪽 위를 살짝 눌러 준다 */
#main_page .sp_card:before{content:''; position:absolute; left:0; top:0; right:0; z-index:1; height:52%;
	background:linear-gradient(180deg, rgba(8,12,18,.62) 0%, rgba(8,12,18,0) 100%);
	transition:opacity .45s ease;}
#main_page .sp_ttl{position:absolute; left:clamp(18px, 1.6vw, 30px); top:clamp(16px, 1.5vh, 26px); z-index:2;
	display:flex; align-items:baseline; gap:10px;
	font-family:var(--hs-serif); font-size:clamp(17px, 1.35vw, 23px); font-weight:600;
	letter-spacing:-.4px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.35);}
#main_page .sp_ttl i{font-family:var(--hs-serif); font-size:clamp(11px, .8vw, 13px); font-style:normal;
	font-weight:400; letter-spacing:1.4px; color:rgba(227,207,166,.82);}
/* 가리킨 카드는 사진이 천천히 다가오고, 나머지는 뒤로 물러난다 */
#main_page .sp_card:hover .sp_img{transform:scale(1.06);}
#main_page .space_grid.is_hover .sp_card:not(:hover){opacity:.55;}
/* 남는 한 칸을 메우는 브랜드 타일 - 사진 사이에 숨을 돌리는 자리다 */
#main_page .sp_brand{display:flex; align-items:center; justify-content:center;
	background:var(--hs-brand);}
#main_page .sp_brand img{display:block; width:min(62%, 190px); height:auto; opacity:.9;}
#main_page .sp_brand:before{display:none;}

/* [이전 버전 2026-09-10까지 - 화면을 가로지르는 목록. 되돌릴 때 아래 주석을 풀고 위 .space_grid 이하를 지운 뒤,
   index.jsp 의 이전 마크업·스크립트 주석도 함께 살릴 것.
   ⚠ 오른쪽 여백 - 화면에 고정된 퀵메뉴(치료후기·상담문의 버튼, layout.css)를 피하는 몫이다.
     없으면 위쪽 두 줄의 화살표가 그 버튼 밑으로 들어간다. */
#main_page .space_list{padding-right:clamp(0px, 5vw, 104px); border-top:1px solid rgba(255,255,255,.14);}
/* 네 칸 - 번호 · 이름 · 설명 · 화살표.
   ⚠ 이름 칸을 max-content 로 두지 말 것. grid 는 줄마다 따로 폭을 재므로 이름 길이에 따라
     설명이 시작하는 자리가 줄마다 어긋난다("보약·한약" 줄만 안쪽으로 밀린다).
     고정 폭으로 잡아야 다섯 줄의 설명이 한 세로선에서 시작해 목록으로 읽힌다. */
#main_page .space_row{position:relative; display:grid; align-items:center;
	grid-template-columns:clamp(44px, 4.4vw, 72px) clamp(200px, 16vw, 290px) minmax(0, 1fr) 40px;
	gap:clamp(16px, 2.2vw, 44px); padding:clamp(20px, 2.4vh, 32px) 0;
	border-bottom:1px solid rgba(255,255,255,.14); text-decoration:none;
	transition:padding-left .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease;}
/* 줄 아래로 좌 → 우로 그어지는 금색 선 */
#main_page .space_row:before{content:''; position:absolute; left:0; bottom:-1px; display:block; width:100%; height:2px;
	background:linear-gradient(90deg, rgba(205,182,139,0) 0%, #cdb68b 4%, #f0dcb4 45%, #d6bf92 88%, rgba(205,182,139,0) 100%);
	transform:scaleX(0); transform-origin:left center;
	transition:transform .9s cubic-bezier(.28,.66,.32,1);}
#main_page .space_row:hover{padding-left:clamp(10px, 1.3vw, 26px);}
#main_page .space_row:hover:before{transform:scaleX(1);}
/* 보고 있는 줄만 남기고 나머지는 뒤로 물러난다 - 어느 줄을 보고 있는지 분명해진다 */
#main_page .space_list.is_hover .space_row:not(:hover){opacity:.4;}

#main_page .sp_no{font-family:var(--hs-sans); font-size:clamp(12px, .95vw, 15px); font-style:normal; font-weight:500;
	letter-spacing:2px; line-height:1; color:rgba(227,207,166,.7);}
/* 이름과 한자는 밑선을 맞춰 나란히 둔다 - 한자는 곁말이라 작게 두고 금빛으로 낮춘다 */
#main_page .sp_name{display:flex; align-items:baseline; gap:clamp(8px, 1vw, 16px); white-space:nowrap;
	font-family:var(--hs-serif); font-size:clamp(23px, 2.4vw, 40px); font-weight:600; letter-spacing:-.6px; color:#fff;
	transition:color .4s ease;}
#main_page .sp_cn{font-family:var(--hs-serif); font-size:clamp(12px, .95vw, 16px); font-style:normal; font-weight:400;
	letter-spacing:2px; color:rgba(227,207,166,.66); transition:color .4s ease;}
#main_page .space_row:hover .sp_name{color:#f0dcb4;}
#main_page .space_row:hover .sp_cn{color:rgba(240,220,180,.9);}
#main_page .sp_desc{font-size:clamp(14px, 1.02vw, 17px); font-weight:300; line-height:1.7;
	color:rgba(255,255,255,.6); word-break:keep-all; transition:color .4s ease;}
#main_page .space_row:hover .sp_desc{color:rgba(255,255,255,.86);}
/* 화살표 - 가는 선 끝에 꺾쇠 하나. 줄을 가리키면 오른쪽으로 한 뼘 나아간다 */
#main_page .sp_go{position:relative; justify-self:end; display:block; width:34px; height:1px;
	background:rgba(255,255,255,.3); transition:background .4s ease, transform .55s cubic-bezier(.22,.61,.36,1);}
#main_page .sp_go:after{content:''; position:absolute; right:0; top:-3.5px; display:block; width:8px; height:8px;
	border-top:1px solid rgba(255,255,255,.3); border-right:1px solid rgba(255,255,255,.3);
	transform:rotate(45deg); transition:border-color .4s ease;}
#main_page .space_row:hover .sp_go{background:#f0dcb4; transform:translateX(8px);}
#main_page .space_row:hover .sp_go:after{border-color:#f0dcb4;}

/* 줄이 아래에서 하나씩 올라온다. 통(.space_list)에 걸린 .reveal 이 화면에 들어오면 켜진다 */
#main_page .space_list .space_row{opacity:0; transform:translateY(26px);
	transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1),
		padding-left .55s cubic-bezier(.22,.61,.36,1);}
#main_page .space_list.is_in .space_row{opacity:1; transform:none;}
#main_page .space_list.is_in .space_row:nth-of-type(1){transition-delay:.05s;}
#main_page .space_list.is_in .space_row:nth-of-type(2){transition-delay:.13s;}
#main_page .space_list.is_in .space_row:nth-of-type(3){transition-delay:.21s;}
#main_page .space_list.is_in .space_row:nth-of-type(4){transition-delay:.29s;}
#main_page .space_list.is_in .space_row:nth-of-type(5){transition-delay:.37s;}
/* 다 올라온 뒤에는 지연을 지운다 - 남겨 두면 마우스를 올릴 때마다 그만큼 늦게 반응한다.
   흐려지는 쪽(.is_hover)에도 걸리므로 반드시 함께 지운다 */
#main_page .space_list.is_in.is_hover .space_row{transition-delay:0s;}
*/

/* 모자이크가 아래에서 떠오른다. 카드마다 조금씩 어긋난 시점에 올라와 판이 짜이는 것처럼 보인다 */
#main_page .space_grid .sp_card{opacity:0; transform:translateY(26px);
	transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1);}
#main_page .space_grid.is_in .sp_card{opacity:1; transform:none;}
#main_page .space_grid.is_in .sp_card:nth-child(1){transition-delay:.05s;}
#main_page .space_grid.is_in .sp_card:nth-child(2){transition-delay:.12s;}
#main_page .space_grid.is_in .sp_card:nth-child(3){transition-delay:.19s;}
#main_page .space_grid.is_in .sp_card:nth-child(4){transition-delay:.26s;}
#main_page .space_grid.is_in .sp_card:nth-child(5){transition-delay:.33s;}
#main_page .space_grid.is_in .sp_card:nth-child(6){transition-delay:.40s;}
/* 다 올라온 뒤에는 지연을 지운다 - 남겨 두면 마우스를 올릴 때마다 그만큼 늦게 반응한다 */
#main_page .space_grid.is_in.is_hover .sp_card{transition-delay:0s;}
body:not(.hero_fx) #main_page .space_grid .sp_card{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
	#main_page .space_grid .sp_card{opacity:1; transform:none; transition:none;}
}

/* [사용 안 함 2026-09-10] 가로 구간과 같은 수묵 소나무를 이 섹션 오른쪽 아래에도 세워 봤으나 걷어냈다.
   줄마다 배경 사진이 통째로 바뀌는 자리라 고정된 그림이 어느 사진과도 어울리지 못했다
   (자세한 사정은 index.jsp 의 .space_tree 주석). 되돌릴 때 아래 주석을 풀고 그 마크업도 함께 살릴 것.
#main_page .space_tree{position:absolute; right:-4%; bottom:-3%; z-index:1; display:block;
	width:min(620px, 42vw); aspect-ratio:1488/1088;
	background:url('/img/tree.png') no-repeat left bottom / contain;
	-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,0) 100%);
	        mask-image:linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,0) 100%);
	/* 여기서는 흰 실루엣으로 뒤집는다(brightness(0)로 새까맣게 만든 뒤 invert 로 흰색).
	   가로 구간은 밤하늘이 거의 검정이라 검은 나무가 별을 가리는 실루엣으로 읽혔지만,
	   이 섹션은 어두운 갈색 사진 위라 검은 나무가 그냥 얼룩으로 보인다.
	   흰 실루엣을 아주 옅게 얹으면 달빛을 받은 나무처럼 배경에 스민다. */
	transform:scaleX(-1); opacity:.14; filter:brightness(0) invert(1) blur(2px); pointer-events:none;}
*/

/* --------------------------------------------------------------------------
   4. 다섯 가지 핵심 진료
   -------------------------------------------------------------------------- */
#main_page .care{position:relative; z-index:2; padding:150px 0; background:#fff;}
#main_page .care_head{position:relative; margin-bottom:150px; text-align:center;}
#main_page .care_head:before{content:''; position:absolute; left:50%; top:-50px; width:400px; height:400px; margin-left:-200px; background:radial-gradient(circle, rgba(166,138,100,.05) 0%, rgba(166,138,100,0) 60%); pointer-events:none;}
#main_page .care_head h2{position:relative; font-family:var(--hs-serif); font-size:51.2px; font-weight:700; letter-spacing:-1px; color:var(--hs-ink);}
#main_page .care_head p{position:relative; margin-top:24px; font-size:17.6px; font-weight:300; letter-spacing:-0.5px; color:var(--hs-grey);}

#main_page .care_item{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:100px; align-items:center; padding:0 40px;}
#main_page .care_item + .care_item{margin-top:180px;}
#main_page .care_item:nth-child(even){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
#main_page .care_item:nth-child(even) .text_col{order:2;}
#main_page .care_item:nth-child(even) .img_col{order:1;}

#main_page .care_item .text_col{position:relative; max-width:400px;}
#main_page .care_item:nth-child(even) .text_col{margin-left:auto;}
#main_page .care_num{position:absolute; left:-40px; top:-96px; font-family:var(--hs-serif); font-size:128px; font-weight:200; line-height:1; color:rgba(166,138,100,.1); pointer-events:none; user-select:none;}
#main_page .care_item:nth-child(even) .care_num{left:auto; right:-40px;}
#main_page .care_item h3{position:relative; display:inline-block; font-family:var(--hs-serif); font-size:38.4px; font-weight:400; line-height:1.35; color:var(--hs-ink);}
#main_page .care_item h3:after{content:''; position:absolute; right:-19px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:1px; background:var(--hs-point); opacity:.8; transition:transform .4s ease;}
#main_page .care_item:hover h3:after{transform:scale(1.5);}
#main_page .care_item .desc{margin-top:19.5px; font-size:17.6px; font-weight:300; line-height:1.8; color:var(--hs-grey);}
#main_page .care_more{display:inline-flex; align-items:center; gap:15px; margin-top:32px; font-size:15.2px; font-weight:400; letter-spacing:1px; color:var(--hs-ink);}
#main_page .care_more i{position:relative; display:block; width:60px; height:1px; background:var(--hs-ink); transition:width .4s cubic-bezier(.22,.61,.36,1);}
#main_page .care_more i:after{content:''; position:absolute; right:0; top:-3.5px; width:0; height:0; border-left:6px solid var(--hs-ink); border-top:4px solid transparent; border-bottom:4px solid transparent;}
#main_page .care_more:hover i{width:84px;}

#main_page .care_item .img_col{display:flex; gap:30px; height:542px;}
#main_page .care_item:nth-child(even) .img_col{flex-direction:row-reverse;}
#main_page .care_vert{display:flex; flex-direction:column; align-items:center; gap:20px; flex:none; width:25px; padding-top:20px; opacity:.8;}
#main_page .care_vert span{display:block; font-family:var(--hs-serif); font-size:17.6px; font-weight:400; letter-spacing:15px; line-height:1; color:var(--hs-gold); writing-mode:vertical-rl; text-orientation:upright;}
#main_page .care_vert i{display:block; width:1px; height:60px; background:var(--hs-gold); opacity:.5;}
#main_page .care_frame{flex:1 1 auto; min-width:0; padding:20px; background:#fff; border:1px solid #e2ddd3; box-sizing:border-box; box-shadow:10px 20px 25px rgba(0,0,0,.03); transition:box-shadow .5s ease, transform .5s ease;}
#main_page .care_item:hover .care_frame{transform:translateY(-4px); box-shadow:10px 26px 34px rgba(0,0,0,.06);}
#main_page .care_frame_inner{height:500px; overflow:hidden;}
/* 진료 이미지 미확정 - 사진 자리만 비워 둔다 (index.jsp careList 의 이미지파일이 빈 값일 때) */
#main_page .care_frame_inner.is_empty{background:#f1efe9;}
#main_page .care_frame_inner img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,.61,.36,1);}
#main_page .care_item:hover .care_frame_inner img{transform:scale(1.045);}

/* --------------------------------------------------------------------------
   5. 상담문의
   -------------------------------------------------------------------------- */
/* 배경이 밝은 수묵 이미지라 글자·버튼은 모두 어두운 색으로 간다(흰 글씨는 안 보임) */
/* [배경 변경 2026-09-10] 수채화 사진(banner_01.webp) → 연한 단색.
   그림은 후기 섹션 배경으로 옮겼다(위 .review) - 마지막에 행동을 권하는 자리라
   바탕이 조용할수록 제목과 버튼이 앞으로 나온다.
   [이전 값] background:#f3efe6 url('/img/banner_01.webp') no-repeat center center / cover; */
#main_page .consult{z-index:2; padding:100px 0 108px; text-align:center; background:#f3efe6 url('/img/consult_bg_watercolor.png') no-repeat center center / cover; position:relative;}
#main_page .consult .label{display:block; font-size:14px; font-weight:500; letter-spacing:3.08px; color:#8d7a55;}
#main_page .consult h2{margin-top:32px; font-family:var(--hs-serif); font-size:42px; font-weight:600; line-height:1.4; color:var(--hs-ink);}
#main_page .consult .btns{display:flex; justify-content:center; gap:14px; margin-top:40px;}
#main_page .consult .btns a{display:inline-flex; align-items:center; justify-content:center; padding:15px 36px; font-size:16px; font-weight:500; letter-spacing:0.64px; border:1px solid transparent; transition:background-color .3s ease, color .3s ease, border-color .3s ease;}
/* 수묵 배경(먹·베이지 톤)에 맞춰 버튼도 먹색 계열로 맞춘다. 녹색은 배경과 겉돌았다.
   선택자에 a 를 포함시킬 것 - `.btns a` 의 border:transparent 가 특이성에서 앞서 테두리가 사라진다 */
#main_page .consult .btns a.btn_fill{background:#2a2a2a; border-color:#2a2a2a; color:#fff;}
#main_page .consult .btns a.btn_fill:hover{background:#111; border-color:#111;}
#main_page .consult .btns a.btn_line{border-color:rgba(34,34,34,.45); color:#2a2a2a; background:rgba(255,255,255,.5);}
#main_page .consult .btns a.btn_line:hover{border-color:#2a2a2a; background:#2a2a2a; color:#fff;}

/* --------------------------------------------------------------------------
   6. 오시는 길
   -------------------------------------------------------------------------- */
#main_page .location{z-index:2; height:725px; overflow:hidden; background:linear-gradient(180deg, #f7f5f0 0%, #fff 100%);}
/* [이전 버전 - 되돌릴 때 아래 1줄을 살리고 현재 3줄을 지운다. index.jsp 의 loc_map 을 span 으로, 하단 카카오맵 스크립트도 제거할 것]
   지도 이미지(map.jpg)를 배경으로: 병원 핀(가로 57% / 세로 47%)이 항상 보이도록 배경 위치를 핀 기준으로 잡았다.
#main_page .loc_map{position:absolute; left:0; top:0; width:48.8%; height:100%; background:url('/img/map.jpg') no-repeat 57% 47% / cover;}
*/
/* 카카오맵 퍼가기(랜딩형). 지도 크기는 index.jsp 하단 스크립트에서 이 영역 실측값으로 렌더하므로
   여기서 강제 리사이즈하지 않는다(마커 위치가 틀어짐). 하단 주소·컨트롤 바는 영역 밖으로 잘라낸다. */
#main_page .loc_map{position:absolute; left:0; top:0; width:48.8%; height:100%; overflow:hidden; background:#f2f6f4;}
#main_page .loc_map .root_daum_roughmap{position:absolute; left:0; top:0;}
#main_page .loc_map .root_daum_roughmap .wrap_map{margin:0;}
/* [크기 조정 2026-09-14] 주소·진료시간·전화를 모두 한 단계씩 키우고 글자색을 진하게(원장님 지시 - 크게, 가독성 좋게).
   [이전 값] h2 40px / addr 16px / dt·dd 17px / tel strong 28px / tel_sub 17px / 버튼 13px, min-width 420px
   섹션 높이(725px)는 그대로 - 커진 만큼 top 을 조금 올려 아래가 잘리지 않게 한다(189 → 150px). */
/* [2026-09-23] 진료시간에 일요일 줄·점심시간 안내가 늘어 아래 여백이 25px 로 줄었다 - 위아래가 비슷하도록 150 → 112px */
#main_page .loc_info{position:absolute; left:60%; top:112px; width:28%; min-width:480px;}
#main_page .loc_info .label{display:block; font-size:12px; font-weight:500; letter-spacing:2.64px; color:var(--hs-accent);}
#main_page .loc_info h2{margin-top:19.8px; font-family:var(--hs-serif); font-size:clamp(38px, 3.2vw, 50px); font-weight:600; line-height:1.3; letter-spacing:-0.6px; color:var(--hs-title);}
#main_page .loc_info .addr{margin-top:18px; font-size:19px; font-weight:400; line-height:1.7; color:var(--hs-title); word-break:keep-all;}
#main_page .loc_hours{margin-top:30px;}
#main_page .loc_hours div{display:flex; align-items:center; justify-content:space-between; padding:15px 0 16px; border-bottom:1px solid var(--hs-line);}
#main_page .loc_hours dt{font-size:21px; font-weight:500; color:var(--hs-title);}
#main_page .loc_hours dd{font-size:21px; font-weight:600; color:var(--hs-title);}
/* 주말 진료를 한 번 더 말하는 한 줄(2026-09-14). 표 바로 아래에 브랜드 녹색으로 - 안내문이지 경고가 아니라 굵기는 보통 */
#main_page .loc_note{margin-top:16px; font-family:var(--hs-serif); font-size:clamp(18px, 1.35vw, 21px); font-weight:500;
	line-height:1.5; letter-spacing:-.3px; color:var(--hs-brand); word-break:keep-all;}
#main_page .loc_tel{display:flex; align-items:center; gap:22px; margin-top:28px;}
/* 010 이 대표번호, 그 아래 02 를 한 단 작게 보조로 둔다(2026-08-26) */
#main_page .loc_tel .tel_group{display:flex; flex-direction:column; align-items:flex-start;}
#main_page .loc_tel .tel_sub{margin-top:4px; padding-left:40px; font-size:20px; font-weight:500; letter-spacing:0.2px; color:var(--hs-body); transition:color .25s ease;}
#main_page .loc_tel .tel_sub:hover{color:var(--hs-brand);}
#main_page .loc_tel strong{font-family:var(--hs-serif); font-size:clamp(32px, 2.4vw, 38px); font-weight:600; color:var(--hs-title);}
/* 수화기 아이콘 - 헤더와 같은 규칙(번호 묶음 앞에 하나). 글자 크기에 맞춰 26px */
#main_page .loc_tel strong a{display:inline-flex; align-items:center; gap:10px;}
#main_page .loc_tel .tel_ico{flex:none; display:block; width:30px; height:30px;}
#main_page .loc_tel .tel_ico img{display:block; width:100%; height:100%; object-fit:contain;}
/* 전화번호 링크는 번호 글자 그대로 보이게 (버튼 스타일은 형제 a = "오시는 길" 에만 적용) */
#main_page .loc_tel strong a{color:inherit;}
#main_page .loc_tel > a{display:inline-flex; align-items:center; justify-content:center; padding:11px 22px; border:1px solid var(--hs-brand); font-size:16px; font-weight:500; letter-spacing:0.4px; color:var(--hs-brand); transition:background-color .3s ease, color .3s ease;}
#main_page .loc_tel > a:hover{background:var(--hs-brand); color:#fff;}

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media all and (max-width:1400px){
	/* [손글씨체 시절 72px] */
	#main_page .hero_copy h1{font-size:52px;}
	#main_page .care_item{gap:60px;}
	#main_page .loc_info{left:55%; top:100px; width:38%; max-width:540px; min-width:0;}
}

@media all and (max-width:1180px){
	/* [손글씨체 시절] h1{62px} / hero_sign{26px} / strong{36px} */
	#main_page .hero_copy h1{font-size:46px;}
	#main_page .hero_copy p{font-size:20px;}
	#main_page .hero_copy .hero_sign{font-size:18px;}
	#main_page .hero_copy .hero_sign strong{font-size:23px;}
	/* [제거 2026-09-10] .space_head p 크기 지정(28px). 제목·부제 모두 clamp 로 화면을 따라간다 */
	#main_page .care_head h2{font-size:42px;}
	#main_page .care_item{padding:0;}
	#main_page .care_num{left:-10px; font-size:104px;}
	#main_page .care_item:nth-child(even) .care_num{right:-10px;}
	#main_page .care_item .img_col{height:460px;}
	#main_page .care_frame_inner{height:418px;}
}

@media all and (max-width:1024px){
	/* 첫 화면은 태블릿 이하에서도 풀스크린을 유지한다(어록 섹션은 문구 높이에 맞춘 auto).
	   ⚠ 꽃 장식(.hero 의 background)은 좁은 화면에서도 가로 100% 그대로 둔다 - 꽃이 그림 좌우 가장자리에
	     몰려 있어, 크게 잡으면 그 꽃들이 화면 밖으로 잘려 나가고 텅 빈 가운데만 남는다 */
	#main_page .hero{min-height:500px;}
	/* [2026-09-14] 스승과 제자 - 세로로 쌓인 세 대목. 위아래 여백을 조금 줄인다 */
	#main_page .story{padding:clamp(40px, 6vh, 80px) 0 clamp(50px, 7vh, 90px);}
	#main_page .st_panel{padding:clamp(30px, 5vh, 60px) 0;}
	#main_page .video_row{gap:20px;}
	#main_page .quote_video{width:min(300px, 32vw);}
	/* [크기 조정 2026-09-10] PC 와 같은 이유로 한 단계씩 키웠다.
	   [이전 값] story_row max-width:860px / quote_video min(340px,38vw)
	             / lt_media min(360px,38vw) / lt_frame img 52svh / pp_media min(340px,36vw) */
	#main_page .story_row{max-width:940px; gap:34px;}
	/* 위 .quote_video 규칙보다 우선순위가 높아 따로 잡아 준다 */
	#main_page .story_row .quote_video{width:min(390px, 41vw);}
	/* 추천서·원칙 - 그림과 글을 나란히 두는 배치는 그대로 두고 크기만 줄인다 */
	/* [크기 조정 2026-10-01] [이전 값] max-width:min(400px, 41vw) */
	#main_page .lt_media{max-width:min(480px, 46vw);}
	#main_page .lt_frame img{max-height:56vh; max-height:56svh;}
	/* [2026-10-02] 추천서 두 장 - 나란히 두는 배치는 그대로, 한 장 폭만 줄인다 */
	/* [크기 조정 2026-10-02] [이전 값] min(360px, 42vw) */
	#main_page .st_letter .lt_card{width:min(400px, 45vw);}
	#main_page .pp_media{width:min(380px, 39vw);}
	/* 연혁 - 화면이 좁아지면 항목 간격도 함께 좁아져 서로 부딪힌다. 사진과 글자를 함께 줄인다
	   (위/아래 지그재그 배치는 PC 규칙 그대로 쓴다 - 그 덕에 같은 층끼리는 두 배로 떨어져 있다) */
	#main_page .history_item{width:200px; margin-left:-100px;}
	#main_page .history_item .ph{width:min(100%, 26vh); margin-bottom:12px;}
	#main_page .history_item em{font-size:24px;}
	#main_page .history_item .tx{font-size:14px;}

	#main_page .review_card{padding:34px 30px;}
	#main_page .review_mark{font-size:54px;}
	#main_page .review_nav button{width:48px; height:48px;}
	#main_page .hero_copy{max-width:none;}
	#main_page .hero_scroll{display:none;}

	/* 좁은 화면에서 원본 비율(3.5:1)을 그대로 두면 높이가 100px 남짓으로 눌려 문구가 깨알같이 작아진다.
	   높이를 화면 폭에 비례해 키우고(cover 라 높이 기준으로 확대됨) 좌우 여백만 잘리게 두어,
	   중앙의 문구는 항상 온전히 - 화면 폭의 약 80% 크기로 - 보이게 한다.
	   background-position 은 반드시 center: 문구가 이미지 중앙에 있어 좌측(22%)으로 밀면 잘린다.
	   문구가 이미지에 포함되어 있으므로 가독성 베일(:before)도 씌우지 않는다 - 씌우면 문구까지 흐려진다. */
	#main_page .hero_gallery{padding:90px 0 100px;}
	#main_page .gallery_head{margin-bottom:45px;}
	#main_page .gallery_head h2{font-size:30px;}
	#main_page .gallery_head p{font-size:15px; margin-top:12px;}
	/* 한 줄로 쌓이므로 가운데 세로선 대신 카드 사이 가로선으로 바꾼다 */
	#main_page .gallery_grid{grid-template-columns:1fr; gap:50px;}
	#main_page .gallery_grid:before{left:22%; right:22%; top:auto; bottom:auto; width:auto; height:1px;
		background:linear-gradient(90deg, rgba(166,138,100,0) 0%, rgba(166,138,100,.35) 50%, rgba(166,138,100,0) 100%);
		top:calc(50% - 0.5px);}
	#main_page .gallery_card .img_box{height:440px;}
	#main_page .gallery_card .text_box{margin-top:16px; padding:0 20px;}
	#main_page .gallery_card .text_box h3{font-size:21px; margin-bottom:10px;}
	#main_page .gallery_card .text_box p{font-size:15px;}

	/* position 은 relative 여야 한다 - static 으로 두면 자식 .space_veil(absolute; inset:0)이
	   이 섹션이 아니라 더 바깥을 기준으로 잡혀 화면 전체를 어둡게 덮는다.
	   (sticky 를 풀려던 것이었는데 static 까지 갈 필요가 없었다) */
	#main_page .space{position:relative; height:auto; padding:120px 20px; display:block;}
	/* 발자취 - 네 칸을 한 줄에 두기엔 설명이 들어갈 폭이 없다. 두 칸씩 두 줄로 접는다.
	   사진은 넉 장 한 줄을 그대로 둔다 - 좌우를 꽉 채우는 띠가 이 섹션의 마무리이기 때문이다 */
	#main_page .lg_cols{grid-template-columns:repeat(2, 1fr); gap:clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);}
	#main_page .lg_cols.is_in .lg_col:nth-of-type(3){transition-delay:.14s;}
	#main_page .lg_cols.is_in .lg_col:nth-of-type(4){transition-delay:.23s;}

	/* 진료 모자이크 - 행 높이만 낮춘다. 4열 배치는 그대로 두어야 두 칸짜리 카드의 리듬이 남는다 */
	#main_page .space_grid{grid-auto-rows:clamp(160px, 20vw, 230px);}
	#main_page .sp_ttl{font-size:17px;}
	/* [사용 안 함 2026-09-10 - 위 .space_tree 주석 참고] #main_page .space_tree{width:min(460px, 46vw); opacity:.45;} */
	/* [이전 버전 - 사진 카드 다섯 장을 늘어놓던 시절의 보정. 위 .space_cards 주석을 되살릴 때 함께 살린다
	#main_page .space_head{margin-bottom:50px;}
	#main_page .space_head p{font-size:26px; word-break:keep-all;}
	#main_page .space_cards{grid-template-columns:repeat(3, 1fr); gap:14px;}
	#main_page .space_card em{bottom:13px; font-size:16px;}
	*/

	#main_page .care{padding:90px 0;}
	#main_page .care_head{margin-bottom:70px;}
	#main_page .care_head h2{font-size:34px;}
	#main_page .care_head p{font-size:16px; word-break:keep-all;}
	#main_page .care_item{display:block; padding:0;}
	#main_page .care_item + .care_item{margin-top:90px;}
	#main_page .care_item .text_col{max-width:none; margin:0 0 32px;}
	#main_page .care_item:nth-child(even) .text_col{margin:0 0 32px;}
	#main_page .care_num{top:-70px; font-size:84px;}
	#main_page .care_item h3{font-size:30px;}
	#main_page .care_item .desc{font-size:16px;}
	#main_page .care_item .img_col{height:auto;}
	#main_page .care_item:nth-child(even) .img_col{flex-direction:row;}
	#main_page .care_vert{display:none;}
	#main_page .care_frame{padding:12px;}
	#main_page .care_frame_inner{height:300px;}

	#main_page .consult{padding:64px 0;}
	#main_page .consult h2{font-size:30px;}
	#main_page .consult .btns{flex-wrap:wrap;}

	#main_page .location{height:auto; padding-bottom:70px;}
	#main_page .loc_map{position:relative; display:block; width:100%; height:340px;}
	#main_page .loc_info{position:relative; left:auto; top:auto; width:100%; padding:44px 20px 0; box-sizing:border-box;}
	#main_page .loc_info h2{font-size:30px;}
}

@media all and (max-width:640px){
	/* [이전 버전 - 반반 레이아웃 이전. 되돌릴 때 아래 1줄을 살리고, 이 블록의 hero/quote height·quote 배경·hero_bg 규칙을 지운다.
	   quote 는 1024px 블록의 height:clamp(220px,68vw,440px) 를 그대로 쓰고 있었다]
	#main_page .hero{padding:80px 0 100px;}
	*/
	/* [이전 버전 - 히어로와 아래 철학 문구 섹션을 첫 화면에 반반씩 넣던 규칙.
	   짝이던 문구 섹션이 카드 갤러리로 바뀌어(2026-08-26) 반으로 나눌 이유가 없어졌다]
	#main_page .hero{height:calc((100vh - var(--hs-header-h) - 1px) / 2); min-height:0; max-height:none; padding:0;}
	#main_page .hero{height:calc((100dvh - var(--hs-header-h) - 1px) / 2);}
	*/
	/* [이전 버전 - 히어로를 화면 높이의 3/4 만 쓰던 시절. 되돌릴 때 아래 2줄을 살린다]
	#main_page .hero{height:calc((100vh - var(--hs-header-h) - 1px) * 0.76); min-height:440px; max-height:none; padding:0;}
	#main_page .hero{height:calc((100dvh - var(--hs-header-h) - 1px) * 0.76);}
	*/
	/* 풍경 배경 - 폭 100% 로 두면 세로가 250px 남짓으로 눌려 하단 띠처럼만 보인다.
	   두 배로 키워 좌우를 잘라내고(가로로 긴 파노라마라 잘려도 자연스럽다) 산·들이 제 크기로 보이게 한다.
	   내리는 양도 그림 크기에 비례하므로 PC 의 7vw 를 두 배(14vw)로 잡는다 */
	/* [2026-09-14] 좁은 화면에서는 화면에서 덜어 내는 몫을 줄인다(주소창까지 있어 첫 화면이 너무 낮아진다) */
	#main_page .hero{min-height:460px; height:calc(100svh - clamp(72px, 10vh, 120px));
		background-size:200% auto; background-position:center calc(100% + 14vw);}
	/* [추가 2026-09-29] 2장(스승님과 나란히 선 사진)만 좁은 화면에서 자르는 기준을 옮긴다 -
	   두 분이 화면 가운데에 오게(원장님 지시).
	   원본 1920x1080 에서 두 분은 가로 200~930px 에 있다(덩어리 중심 약 29%). 세로로 긴 모바일 화면에서는
	   cover 로 채우면 사진이 화면보다 세 배 넓게 확대되어, PC 기준값(27%)으로는 스승님 왼쪽이 잘려 나간다.
	   ⚠ 사진과 기본 위치는 index.jsp 의 인라인 style 에서 관리한다 - 그 값을 이기려면 !important 가 필요하다.
	     장 순서를 바꾸면 nth-of-type(2) 도 함께 고칠 것. */
	#main_page .hero_stage .hero_slide:nth-of-type(2){background-position:20% center !important;}
	#main_page .story{padding:36px 0 44px;}
	#main_page .st_panel{padding:32px 0;}
	/* 좁은 화면에서는 장식이 글 뒤로 통째로 들어와 배경이 아니라 얼룩이 된다 - 작게 두고 더 옅게 */
	#main_page .st_deco_tl{width:70vw; opacity:.4;}
	#main_page .st_deco_br{width:66vw; opacity:.4;}
	/* 좌우로 나란히 두기엔 폭이 없다 - 글자·영상·글자를 세로로 쌓고 가운데 정렬한다 */
	#main_page .video_row{flex-direction:column; gap:26px;}
	#main_page .side_t{flex:none; font-size:clamp(24px, 7.4vw, 34px); text-align:center;}
	#main_page .quote_video{width:min(300px, 66vw);}
	/* 좁은 화면에서는 한쪽 정렬 장도 가운데로 되돌린다 - 좌우 여백이 거의 없어
	   한쪽으로 붙여 봐야 비켜 줄 자리가 생기지 않고 균형만 깨진다 */
	#main_page .hero_chapter.is_left,
	#main_page .hero_chapter.is_right{align-items:center; text-align:center;}
	#main_page .hero_chapter.is_left .hc_desc{padding-left:20px;}
	#main_page .hero_chapter.is_right .hc_desc{padding-right:20px;}
	/* [2026-09-14] 제목이 커진 만큼 좁은 화면에서는 따로 묶는다 - "곁에서 가르침을 받은 시간" 한 줄이 접히지 않는 선 */
	/* [크기 조정 2026-10-01] 2px 키웠다. [이전 값] clamp(27px, 7.4vw, 36px) */
	/* [크기 조정 2026-10-02] 2px 더 키웠다. [이전 값] clamp(29px, calc(7.4vw + 2px), 38px) */
	#main_page .hc_title{font-size:clamp(31px, calc(7.4vw + 4px), 40px);}
	#main_page .hc_title .mo_br{display:inline;}
	/* [2026-10-16] 2장(is_rc) "곁에서 가르침을 / 받은 시간 11년"만 아래로 살짝 내린다.
	   장 자체는 translateY(-50%) 로 세로 가운데를 잡고 있어 transform 은 건드리지 않고 top 으로 민다. */
	#main_page .hero_chapter.is_rc .hc_title{position:relative; top:24px;}
	/* 3장 설명 - 좁은 화면에서도 제목(27~36px)보다 작게 */
	/* [크기 조정 2026-10-02] 2px 키웠다. [이전 값] clamp(20px, 5.2vw, 26px) */
	#main_page .hc_desc.hc_desc_lg{font-size:clamp(22px, calc(5.2vw + 2px), 28px);}
	/* [2026-09-21] 숫자도 제목과 같은 크기 - 위 기본 규칙과 같다. [이전 값] font-size:2em */
	#main_page .hc_num.hc_big{font-size:1em;}
	/* 좌우로 나란히 두기엔 폭이 없다 - 영상 아래에 글을 쌓고 가운데로 모은다 */
	#main_page .story_row{flex-direction:column; align-items:center; gap:28px; text-align:center;}
	/* [크기 조정 2026-09-10 - 이전 값 min(280px, 62vw)] */
	#main_page .story_row .quote_video{width:min(310px, 68vw);}
	/* 좁은 화면에서는 본문의 <br> 을 무시하고 폭에 맞춰 흐르게 둔다 - 넣어 둔 자리에서 끊으면
	   한 줄에 두세 글자만 남는 줄이 생긴다 */
	#main_page .sr_body{margin-top:20px; font-size:17px; line-height:1.8;}
	#main_page .sr_sign{margin-top:18px;}
	#main_page .sr_body br{display:none;}
	#main_page .sr_title{letter-spacing:-.6px;}
	/* 발자취 - 한 줄에 한 대목씩 쌓고, 사진은 두 장씩 두 줄로 접는다.
	   비율도 세로로 덜 길게 잡는다(3:4 → 4:5) - 좁은 화면에서 3:4 는 사진 한 장이 화면을 넘긴다 */
	#main_page .legacy{padding-top:clamp(70px, 10vh, 110px);}
	#main_page .lg_cols{grid-template-columns:1fr; gap:34px; margin-bottom:clamp(48px, 7vh, 70px);}
	#main_page .lg_imgs{grid-template-columns:repeat(2, 1fr);}
	/* 두 장씩 두 줄이라 화면 높이 상한을 풀어 준다 - 여기서는 한 화면에 담는 것이 목표가 아니다 */
	#main_page .lg_img{aspect-ratio:1/1; max-height:none;}
	#main_page .lg_title{font-size:20px;}
	#main_page .lg_desc{font-size:14.5px;}

	/* [제거 2026-09-14] 좁은 화면에서 가로 구간(.hs_*)을 세로로 풀던 규칙 - 이제 모든 화면에서 세로다 */
	#main_page .letter_row{flex-direction:column; align-items:center; gap:26px; text-align:center;}
	/* 사진을 글 위로 올린다(column-reverse) - 앞 패널들이 모두 "그림 먼저"라
	   세로로 쌓일 때도 같은 차례로 읽혀야 흐름이 끊기지 않는다 */
	#main_page .pupil_row{flex-direction:column-reverse; align-items:center; gap:26px; text-align:center;}
	/* [크기 조정 2026-09-10] 이전 값: pp_media min(300px,70vw) / lt_media min(320px,74vw)
	   / lt_frame img 46svh / lt_title clamp(26px,7vw,34px) */
	#main_page .pp_media{width:min(325px, 75vw);}
	/* [크기 조정 2026-10-01] 본문 폭을 꽉 채운다. [이전 값] max-width:min(345px, 79vw) */
	#main_page .lt_media{max-width:100%;}
	#main_page .lt_frame img{max-height:50vh; max-height:50svh;}
	/* [2026-10-02] 추천서 두 장 - 좁은 화면에서도 나란히 둔다(원본과 사본을 한눈에 견주게).
	   글씨는 이 크기로는 읽히지 않으므로 눌러서 크게 보게 한다 - 호버가 없어 "+ 크게 보기" 는 늘 떠 있다 */
	#main_page .st_letter{padding:52px 0 56px;}
	#main_page .st_letter .lt_pair{gap:14px;}
	#main_page .st_letter .lt_card{width:calc(50% - 7px);}
	#main_page .st_letter.is_in .lt_card_l{transform:rotate(-1deg);}
	#main_page .st_letter.is_in .lt_card_r{transform:rotate(1deg);}
	#main_page .st_letter .lt_card figcaption{margin-top:12px; font-size:13px; letter-spacing:.06em;}
	#main_page .st_letter .lt_frame.is_zoomable:after{right:6px; bottom:6px; padding:3px 7px; font-size:11px;}
	#main_page .lt_mark{top:64%; font-size:22vw;}
	#main_page .lt_title{font-size:clamp(28px, 7.6vw, 38px); letter-spacing:-.6px;}
	/* [제거 2026-09-10] 좁은 화면용 밑줄 두께(2px). 굵기를 em 으로 바꿔 글자 크기를 따라가므로 필요 없어졌다 */
	#main_page .lt_body{margin-top:20px; font-size:17px; line-height:1.8;}
	/* 넣어 둔 자리에서 끊으면 한 줄에 두세 글자만 남는 줄이 생긴다 - 폭에 맞춰 흐르게 둔다 */
	#main_page .lt_body br{display:none;}
	/* [2026-09-23] 원칙 대목 본문은 줄마다 짧게 끊은 글이라(가장 긴 줄 15자) 모바일에서도 줄바꿈을 살린다 */
	#main_page .pp_text .lt_body br{display:inline;}
	/* 모바일은 카드 한 장이 화면을 거의 채운다 - 좌우 여백을 줄여 글줄이 좁아지지 않게 한다.
	   정사각형을 고집하면 글이 넘치므로 세로를 조금 늘려 준다(aspect-ratio 해제) */
	/* 상하 24px 은 hover 로 떠오른 카드가 잘리지 않게 하는 여유(PC 규칙과 같은 이유) */
	/* 터치 기기에는 hover 가 없어 이 설명은 영원히 뜨지 않는다 - 빈 자리만 남으므로 아예 뺀다 */
	#main_page .space_desc{display:none;}

	/* 연혁 - 모바일은 같은 층끼리도 120px 남짓이라 사진을 넣을 자리가 없다.
	   사진은 빼고 연도·내용만 남겨 지그재그로 읽히게 한다 */
	#main_page .history_item{width:110px; margin-left:-55px;}
	#main_page .history_item .ph{display:none;}
	#main_page .history_item .hi_body{bottom:auto; top:auto;}
	#main_page .history_item:nth-of-type(odd) .hi_body{bottom:14px;}
	#main_page .history_item:nth-of-type(even) .hi_body{top:14px;}
	#main_page .history_item em{font-size:18px; margin-bottom:3px;}
	#main_page .history_item .tx{font-size:11px; line-height:1.35;}

	/* 흐르는 후기 띠 - 카드를 좁히고 흐름도 조금 빠르게(폭이 좁아 같은 속도면 느려 보인다) */
	#main_page .rv_card{width:min(268px, 74vw); padding:20px 18px; border-radius:12px;}
	#main_page .rv_txt{font-size:14.5px; line-height:1.7;}
	#main_page .rv_track{animation-duration:96s;}
	#main_page .rv_row2 .rv_track{animation-duration:116s;}
	/* [사용 안 함 2026-09-10 - 슬라이드 시절의 값]
	#main_page .review_swiper{padding:24px 16px;}
	#main_page .review_card{padding:30px 24px; aspect-ratio:auto; min-height:340px;}
	#main_page .review_txt{font-size:17px; line-height:1.75;} */
	/* 섹션 높이를 화면 절반으로 고정하면 cover 확대율이 커져 이미지 중앙의 문구 좌우가 잘린다.
	   배경 폭을 화면의 252% 로 고정하면 문구(이미지 폭의 35.4%)가 화면 폭의 약 89% 로 항상 온전히 들어온다.
	   PC 에서 문구를 오른쪽으로 옮기려고 이미지 왼쪽에 100px 을 덧댔는데, 폭이 좁은 모바일에서는 그만큼
	   오른쪽이 잘린다. position-x 를 53.5% 로 밀어 모바일에서는 문구가 화면 정중앙에 오게 되돌린다.
	   높이가 남는 만큼은 이미지 위/아래 가장자리에서 딴 색으로 이어 붙여 경계가 보이지 않게 한다.
	   [이전 버전 - 소나무·먹번짐 배경(3802x1088)용 값]
	#main_page .quote{
		background-image:url('/img/haesung_main_img01.webp'),
			linear-gradient(90deg,#bcab9d,#cebcae,#c6b4a5),
			linear-gradient(90deg,#ebdece,#ede1d5,#e2d4c7);
		background-size:270% auto, 100% 51%, 100% 51%;
		background-position:52.3% center, bottom center, top center;
		background-repeat:no-repeat;
	}
	*/
	#main_page .hero_gallery{padding:70px 0;}
	#main_page .gallery_head h2{font-size:24px;}
	#main_page .gallery_card .img_box{height:330px;}
	/* [이전 버전 - 인물 일러스트를 옅게 깔던 시절]
	#main_page .hero_bg{background-position:right -12% bottom; background-size:auto 76%;}
	#main_page .hero.is_ready .hero_bg{opacity:.5;}
	#main_page .hero_veil{background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.28) 100%);}
	*/
	/* [이전 버전 - 밝은 배경이던 시절. 되돌릴 때 아래 2줄을 살린다]
	#main_page .hero_bg{background-position:30% center;}
	#main_page .hero_veil{background:linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.2) 100%);}
	*/
	/* 좁은 화면일수록 사진이 크게 확대돼 대비가 들쭉날쭉해진다 - 한 단계 더 덮는다 */
	#main_page .hero_veil{background:linear-gradient(180deg, rgba(6,12,10,.76) 0%, rgba(6,12,10,.56) 32%, rgba(6,12,10,.66) 70%, rgba(6,12,10,.86) 100%);}
	/* 마지막 장(동의보감)은 여기서도 한 겹 더 - 위 기본 규칙보다 우선순위가 높은 is_last_slide 규칙이
	   좁은 화면의 짙은 값을 도로 옅게 만들지 않도록 같은 층위에서 다시 정한다 */
	#main_page .hero.is_last_slide .hero_veil{background:linear-gradient(180deg, rgba(6,12,10,.84) 0%, rgba(6,12,10,.72) 32%, rgba(6,12,10,.78) 70%, rgba(6,12,10,.9) 100%);}
	#main_page .hero_nav{bottom:64px; padding:0 16px; gap:8px;}
	#main_page .hero_dot{width:32px;}
	#main_page .hero_copy .label{margin-bottom:12px; font-size:12px; letter-spacing:2.4px;}
	#main_page .hero_copy .label:before{width:24px; margin-right:10px;}
	#main_page .hero_copy .btn_hero{margin-top:24px; padding:13px 30px; font-size:15px;}
	/* 궁서체는 폭이 명조와 비슷해, 인용문 한 줄(15자 남짓)이 좁은 화면에 들어가려면 28px 이 한계다.
	   [손글씨체 시절] h1{36px} / hero_sign{22px} / strong{30px} */
	#main_page .hero_copy h1{font-size:27px; line-height:1.62; word-break:keep-all;}
	/* PC 는 줄(.ln)마다 붓이 지나가지만, 좁은 화면에서 줄을 그대로 나누면 첫 줄이 폭을 넘겨 접히면서
	   "설명," 만 한 줄에 남는다. 여기서는 .ln 을 흘려보내 단어 단위 줄바꿈에 맡기고,
	   붓 효과는 h1 전체에 한 번만 준다. */
	#main_page .hero_copy h1 .ln{display:inline; -webkit-mask-image:none; mask-image:none;}
	#main_page .hero_copy h1{
		-webkit-mask-image:linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 100%);
		        mask-image:linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 100%);
		-webkit-mask-size:260% 100%;   mask-size:260% 100%;
		-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
		-webkit-mask-position:100% 0;  mask-position:100% 0;
		transition:-webkit-mask-position 1.1s cubic-bezier(.3,.7,.4,1), mask-position 1.1s cubic-bezier(.3,.7,.4,1);
		transition-delay:.3s;}
	#main_page .hero.is_ready .hero_copy h1{-webkit-mask-position:0 0; mask-position:0 0;}
	#main_page .hero.is_ready .hero_copy .hero_sign{transition-delay:1.35s;}
	#main_page .hero.is_ready .hero_copy .btn_hero{transition-delay:1.75s;}
	#main_page .hero_copy p{font-size:16px;}
	#main_page .hero_copy .hero_sign{margin-top:18px; font-size:16px;}
	#main_page .hero_copy .hero_sign strong{margin-left:6px; font-size:20px;}
	/* [이전 버전 - 인물 그림 두 장을 배경으로 깔던 시절의 모바일 보정. 되돌릴 때 아래 4줄을 살리고 현재 1줄을 지운다]
	#main_page .space{padding:70px 16px;
		background:url('/img/main_hero_03.webp') no-repeat left -14% bottom / auto 36%,
			url('/img/main_hero_02_fade.webp') no-repeat right -20% bottom / auto 44%,
			#fff;}
	*/
	/* 배경 사진(wwweqe.png)은 위쪽 규칙의 cover 를 그대로 쓰고 여백만 줄인다(2026-08-27) */
	#main_page .space{padding:70px 16px;}
	/* 진료 모자이크 - 네 칸을 두 칸으로 접는다. 두 칸짜리 카드는 한 줄을 통째로 쓰게 두어
	   (2 / 1+1 / 2 …) 좁은 화면에서도 큰 카드와 작은 카드의 리듬이 남는다 */
	#main_page .space_grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:clamp(150px, 40vw, 210px);}
	#main_page .sp_ttl{left:16px; top:14px; font-size:16px;}
	#main_page .sp_ttl i{font-size:11px;}
	#main_page .sp_brand img{width:min(52%, 150px);}
	/* [사용 안 함 2026-09-10 - 위 .space_tree 주석 참고] #main_page .space_tree{display:none;} */
	/* [이전 버전 - 사진 카드 시절의 보정. 위 .space_cards 주석을 되살릴 때 함께 살린다
	#main_page .space_head p{font-size:21px;}
	#main_page .space_cards{grid-template-columns:repeat(2, 1fr); gap:10px;}
	#main_page .space_card em{bottom:11px; font-size:15px;}
	*/
	#main_page .care_head h2{font-size:27px;}
	#main_page .care_frame_inner{height:210px;}
	#main_page .consult h2{font-size:24px;}
	#main_page .consult .btns a{width:100%;}
	#main_page .loc_tel{flex-wrap:wrap; gap:12px;}
}