@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700&family=Song+Myung&display=swap');

/* ==========================================================================
   해성한의원 사이트 공통 (2026-08-13 퍼블리싱 시작)
   - headHtml.jsp 가 이 파일을 맨 마지막에 로드한다(우선순위 최상).
   - 여기에는 사이트 전역 요소(디자인 토큰 / GNB / FNB)만 둔다.
     페이지 전용 스타일은 /css/{모듈}.css 로 분리할 것. (publish.md 3.4)
   ========================================================================== */
:root{
	/* 색상 토큰 (Figma 디자인 변수) */
	--hs-title:#202b28;      /* 제목 */
	--hs-body:#4d5b56;       /* 본문 */
	--hs-muted:#8b9793;      /* 보조 */
	--hs-line:#d9e1dc;       /* 경계선 */
	--hs-hairline:#b9c6c0;   /* 얇은 선 */
	--hs-paper:#fafbf9;      /* 바탕 */
	--hs-brand:#2c5f55;      /* 브랜드 */
	--hs-accent:#3e7a6c;     /* 강조 */
	--hs-gold:#a68a64;       /* 고서(古書) 포인트 */
	--hs-point:#9e2a2b;      /* 낙관 점 */
	--hs-ink:#1a1a1a;        /* 먹 */
	--hs-grey:#666;          /* 회색 본문 */
	--hs-navy:#022443;       /* 푸터 배경 */
	--hs-jade:#9dc1b5;       /* 라벨 */
	--hs-on-brand:#f6faf8;   /* 어두운 배경 위 글자 */
	/* 서체 */
	--hs-serif:'Noto Serif KR', serif;
	--hs-sans:'Noto Sans KR', sans-serif;
	/* 손글씨체(East Sea Dokdo) - 웨이트가 400 하나뿐이라 이 변수를 쓰는 곳은 font-weight:400 으로 둘 것 */
	--hs-hand:'East Sea Dokdo', 'Noto Serif KR', serif;
	/* 궁서체 (2026-09-07 메인 히어로 문구·서명) - 궁서체는 Windows 에만 설치된 시스템 폰트라
	   웹폰트로 배포할 수 있는 파일이 없다. Windows 는 진짜 궁서체를 쓰고, Mac·iOS·Android 는
	   인상이 가장 가까운 Song Myung(송명, Google Fonts)으로 떨어진다 - OS 별로 글자 모양이 다르게 보인다.
	   전 기기에서 같은 서체로 통일하려면 라이선스가 확인된 궁서 계열 웹폰트를 /fonts/ 에 넣고
	   eastseadokdo.css 처럼 @font-face 로 등록한 뒤 이 목록 맨 앞에 얹을 것.
	   '궁서'(Gungsuh)는 비례폭, '궁서체'(GungsuhChe)는 고정폭이라 본문용으로는 비례폭을 먼저 찾는다.
	   웨이트는 모두 400 한 벌 - 이 변수를 쓰는 곳은 font-weight:400 으로 둘 것(가짜 볼드가 획을 뭉갠다). */
	--hs-gungseo:'궁서', 'Gungsuh', 'GungsuhChe', 'Song Myung', 'Batang', 'Noto Serif KR', serif;
	/* 공통 헤더 높이 */
	--hs-header-h:92px;
}

/* ===== GNB (header.jsp) =====
   헤더는 fixed 로 고정한다. 문서 흐름에서 빠지므로 body 에 헤더 높이만큼 여백을 준다.
   [기록 정정 2026-09-07] 예전에는 "이 사이트에서 sticky 가 동작하지 않는다"고 적어 두었다.
   basic.css 5행의 `html, body{overflow-x:hidden}` 이 body 를 스크롤 컨테이너로 만들어
   sticky 가 뷰포트 대신 그 컨테이너에 붙기 때문이었는데, 그 뒤 main.css 10행에 추가된
   `html, body{overflow-x:clip}` 이 이 값을 덮어쓴다. clip 은 스크롤 컨테이너를 만들지 않으므로
   지금은 sticky 가 정상 동작한다(메인 히어로의 원형 축소 인터랙션이 실제로 sticky 를 쓴다).
   헤더를 sticky 로 바꿀 이유는 없어 fixed 를 유지하지만, 다른 곳에서 sticky 를 포기할 필요는 없다. */
#header{position:fixed; top:0; left:0; z-index:900; width:100%; background:rgba(250,251,249,0.94); border-bottom:1px solid var(--hs-line); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:box-shadow .3s ease, background-color .3s ease;}
body{padding-top:calc(var(--hs-header-h) + 1px);}
#header.on{background:rgba(250,251,249,0.98); box-shadow:0 2px 14px rgba(32,43,40,0.06);}
/* [간격 조정 2026-09-29] 새 로고("(신사동)" 포함)가 가로로 길어지면서 한 번 좁혔던 간격을,
   로고를 270px 로 줄이며 원래 값 쪽으로 되돌렸다(원장님 지시 - GNB 로고가 너무 크다).
   [값의 내력] 원래 clamp(20px,2.6vw,52px) → 로고 320px 때 clamp(16px,1.8vw,34px) → 지금 */
#header .header_inner{display:flex; align-items:center; gap:clamp(18px,2.2vw,42px); width:100%; max-width:1400px; height:var(--hs-header-h); margin:0 auto; padding:0 32px; box-sizing:border-box;}
/* 로고는 심볼 + 글자 두 장이다(header.jsp 의 분리 주석 참고).
   [원본 교체 2026-09-29] 더 선명한 로고 원본(/img/logo.png, 2505x558)을 새로 받아 다시 잘랐다.
   폭 비율(15.17% / 84.83%)은 여백을 잘라낸 2155px 을 327px 지점에서 자른 값 그대로다 -
   이 비율을 지켜야 나란히 붙였을 때 원본과 같은 모양·간격이 된다.
   박스 비율(7.26:1)도 원본 그대로여야 한다 - 어긋나면 object-fit:contain 이 위아래(또는 좌우)에
   빈 자리를 남겨 로고가 제 크기보다 작게 앉는다. 아래 반응형 구간의 width/height 도 모두 7.26:1 이다.
   [크기 조정 2026-09-29] 320px → 270px → 240px (원장님 지시 - GNB 로고가 너무 크다, 두 번에 걸쳐 줄였다).
   [이전 값] 첫 번째 "(신사동)" 로고 원본 기준 6.43:1 / mark 17.23% / type 82.77%
             그 전 로고 "해성한의원"(신사동 없음) 4.09:1 / width:262px; height:64px; / mark 26.3% / type 73.7% */
#header .logo{flex:none; display:flex; align-items:center; width:240px; height:33px;}
#header .logo img{display:block; height:100%; object-fit:contain;}
#header .logo .lg_mark{flex:0 0 15.17%; width:15.17%;}
#header .logo .lg_type{flex:0 0 84.83%; width:84.83%;}

#header .gnb{flex:1 1 auto;}
#header .gnb > ul{display:flex; align-items:center; justify-content:center; gap:clamp(18px,2.9vw,63px);}
#header .gnb > ul > li{position:relative;}
#header .gnb > ul > li > a{position:relative; display:block; padding:6px 0; font-family:var(--hs-sans); font-size:16px; font-weight:400; letter-spacing:0.16px; color:var(--hs-title); white-space:nowrap; transition:color .25s ease;}
#header .gnb > ul > li > a:after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--hs-brand); transition:width .3s ease;}
#header .gnb > ul > li > a:hover{color:var(--hs-brand);}
#header .gnb > ul > li > a:hover:after{width:100%;}
#header .gnb > ul > li.on > a{color:var(--hs-brand);}
#header .gnb > ul > li.on > a:after{width:100%;}

/* 2뎁스 드롭다운 (PC) - 링크와 메뉴 사이 간격은 :before 로 이어 붙여 hover 가 끊기지 않게 한다 */
#header .gnb .depth02{position:absolute; left:50%; top:calc(100% + 18px); z-index:10; min-width:148px; padding:14px 0; background:rgba(250,251,249,.98); border:1px solid var(--hs-line); box-shadow:0 12px 26px rgba(32,43,40,.08); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transform:translate(-50%, 6px); transition:opacity .25s ease, visibility .25s ease, transform .25s ease;}
#header .gnb .depth02:before{content:''; position:absolute; left:0; right:0; top:-19px; height:19px;}
#header .gnb > ul > li:hover .depth02,
#header .gnb > ul > li:focus-within .depth02{opacity:1; visibility:visible; transform:translate(-50%, 0);}
#header .gnb .depth02 > li > a{display:block; padding:9px 22px; font-family:var(--hs-sans); font-size:15px; font-weight:400; line-height:1.4; white-space:nowrap; text-align:center; color:var(--hs-body); transition:color .2s ease, background-color .2s ease;}
#header .gnb .depth02 > li > a:hover{color:var(--hs-brand); background:rgba(62,122,108,.06);}
#header .gnb .depth02 > li.on > a{color:var(--hs-brand); font-weight:500;}

#header .util{flex:none; display:flex; align-items:center; gap:18px;}
#header .util .gnb_sun_tag{display:inline-flex; align-items:center; padding:5px 12px; border:1px solid rgba(62,122,108,.35); border-radius:14px; font-family:var(--hs-sans); font-size:12px; font-weight:500; color:var(--hs-brand); background:rgba(62,122,108,.08); letter-spacing:-0.2px; white-space:nowrap;}
/* 전화번호 - 연락처는 010-3449-1075 하나. 모바일에서 바로 통화되도록 tel: 링크 */
#header .util .tel{display:flex; align-items:center; gap:10px; font-family:var(--hs-serif); font-size:20px; font-weight:600; letter-spacing:0.54px; line-height:1.3; color:var(--hs-title); white-space:nowrap; transition:color .25s ease;}
#header .util .tel_ico{flex:none; display:block; width:30px; height:30px;}
#header .util .tel_ico img{display:block; width:100%; height:100%; object-fit:contain;}
#header .util a.tel:hover{color:var(--hs-brand);}
#header .util .login{padding-bottom:3px; border-bottom:1px solid var(--hs-hairline); font-family:var(--hs-sans); font-size:13px; color:var(--hs-muted); transition:color .25s ease, border-color .25s ease;}
#header .util .login:hover{color:var(--hs-brand); border-color:var(--hs-brand);}
#m_menu .m_tel_box .m_sun_tag{display:inline-block; margin-top:8px; padding:4px 10px; border:1px solid rgba(62,122,108,.3); border-radius:12px; font-size:12px; font-weight:500; color:var(--hs-brand); background:rgba(62,122,108,.06);}

/* 모바일 햄버거 */
#header .m_btn{display:none; flex:none; width:24px; cursor:pointer;}
#header .m_btn i{display:block; width:100%; height:2px; margin:5px 0; background:var(--hs-title); transition:all .35s ease;}

@media all and (max-width:1280px){
	#header .gnb > ul{gap:32px;}
	#header .header_inner{gap:22px;}
	/* [추가 2026-09-29] 새 로고가 길어져 이 구간부터 한 단계 줄인다 - 그대로 두면 전화번호가 화면 밖으로 밀린다 */
	#header .logo{width:220px; height:30px;}
}
/* 1024~1180 구간은 로고(262px) + GNB 8개 + 번호/로그인이 한 줄에 다 들어가지 않아
   util 이 화면 밖으로 밀려나 있었다(전화번호 2줄 이전부터). GNB 가 줄어들 수 있게
   min-width:0 을 주고 로고·글자·간격을 한 단계씩 좁힌다. */
@media all and (max-width:1180px){
	#header .header_inner{gap:18px; padding:0 20px;}
	#header .logo{width:205px; height:28px;}
	#header .gnb{min-width:0;}
	/* GNB 간격을 조금 더 좁혀 마지막 메뉴(상담문의)와 전화 아이콘이 붙어 보이지 않게 여백을 만든다 */
	#header .gnb > ul{gap:clamp(10px,1.4vw,26px);}
	#header .gnb > ul > li > a{font-size:15px;}
	#header .util{gap:12px;}
	#header .util .tel{font-size:18px; gap:8px;}
	#header .util .tel_ico{width:26px; height:26px;}
}
@media all and (max-width:1024px){
	:root{--hs-header-h:64px;}
	#header .header_inner{gap:0; justify-content:space-between; padding:0 16px;}
	#header .logo{width:195px; height:27px;}
	#header .gnb{display:none;}
	#header .util .tel{font-size:16px; gap:7px;}
	#header .util .tel_ico{width:22px; height:22px;}
	/* 헤더 바는 로고·번호·햄버거로 꽉 차서 로그인은 모바일 메뉴 안(#m_menu .login_box)에 둔다 */
	#header .util .login{display:none;}
	#header .m_btn{display:block; margin-left:16px;}
}

@media all and (max-width:420px){
	#header .header_inner{padding:0 12px;}
	/* [2026-09-29] 좁은 화면에서는 로고·전화번호·햄버거가 한 줄에 몰려 답답해 보인다(원장님 지시) -
	   로고를 줄여 전화번호와 사이에 숨 쉴 자리를 만든다. [값의 내력] 185px(간격 0) → 165px(간격 15px) → 145px */
	#header .logo{width:145px; height:20px;}
	#header .util .tel{font-size:14px; gap:4px;}
	#header .util .tel_ico{width:18px; height:18px;}
	#header .m_btn{margin-left:10px;}
}

@media all and (max-width:360px){
	#header .header_inner{padding:0 8px;}
	#header .logo{width:126px; height:17px;}
	#header .util .tel{font-size:13px; gap:3px;}
	#header .util .tel_ico{width:16px; height:16px;}
	#header .m_btn{margin-left:8px;}
}

/* ===== 메인 전용 - 헤더 오버레이 (2026-09-07) =====
   메인(index.jsp)의 헤더는 첫 화면 사진 위에 투명하게 얹힌다. GNB 는 그 내내 떠 있어야 하므로,
   헤더 뒤에 배경 밝기에 맞춘 바를 항상 깔아 글자가 어느 장면에서도 읽히게 한다.
   [2026-09-14] 밤하늘 구간이 없어졌다. 지금 상태는 셋 - 어두운 장(기본) · 밝은 장(hero_pale) · 첫 화면을 지난 뒤(hero_lit).
   판정은 index.jsp 의 hsHeaderTone.

   [이전 버전 - 되돌릴 때: .hero_lit 규칙을 지우고 아래 두 줄을 살린 뒤,
    index.jsp 의 hero_lit 토글을 hero_fading/hero_passed 로 되돌린다]
   body.is_main #header{background:transparent; border-bottom-color:rgba(255,255,255,.16);}
   body.is_main.hero_fading #header{opacity:0; pointer-events:none; transform:translateY(-10px);}
   그때는 원 경계가 헤더를 가로지르는 구간에서 글자의 일부가 어두운 배경에, 나머지가 밝은 배경에 놓여
   어떤 색도 읽히지 않아 헤더를 통째로 감췄었다. 바를 깔면서 그럴 이유가 없어졌다.

   - body.is_main 은 index.jsp 에서만 붙인다 - 서브 페이지는 위의 기본 헤더 규칙 그대로다.
   - 기본(=어두운 배경): 위에서 아래로 옅어지는 어두운 그라디언트 + 흰 글자.
     경계선 없이 화면에 녹아들어 풀스크린 사진 위에서도 헤더가 무겁지 않다.
   - .hero_lit(=밝은 배경): 원이 닫힌 뒤의 한지 구간과 인터랙션이 끝난 뒤. 원래의 밝은 헤더.
     붙이고 떼는 시점은 index.jsp 가 원의 실제 크기와 밤하늘 짙기를 재서 판정한다.
   - 로고·전화 아이콘은 컬러 원본뿐이라 어두운 배경 위에서는 흰 단색으로 반전시킨다.
     (흰색 로고 파일이 생기면 이 filter 대신 이미지를 바꾸는 편이 낫다) */
body.is_main{padding-top:0;}
body.is_main #header{border-bottom-color:transparent; box-shadow:none;
	background:rgba(6,12,22,.94);
	-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
	transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;}
/* 맨 위에서만 - 바를 옅게 깔아 첫 화면 사진이 헤더 뒤로 이어져 보이게 한다 (2026-09-10).
   진한 바(.94)를 그대로 두면 화면 위쪽이 잘린 것처럼 보이고, 완전히 투명하게 두면
   밝은 사진이 올라온 장에서 흰 글자가 읽히지 않는다 - 그 사이를 흐림으로 메운다.
   조금이라도 스크롤하면(index.jsp 가 body 의 at_top 을 떼면) 위 규칙의 진하기로 돌아온다.
   ⚠ :not(.hero_lit) - 밝은 바로 넘어간 구간에는 걸리지 않게 한다(맨 위에서는 겹칠 일이 없지만,
     스크롤 위치를 복원하며 두 클래스가 한 프레임 함께 붙는 경우를 막는다). */
body.is_main.at_top:not(.hero_lit) #header{background:rgba(6,12,22,.3);
	-webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);}
/* [분리 2026-09-10] 어두운 헤더에서 흰색으로 반전하는 것은 글자뿐이다.
   심볼(파란 원 + 초록 물결)까지 반전하면 흰 덩어리만 남아 로고가 아니라 얼룩이 된다 -
   어두운 바탕에서도 심볼은 제 색으로 두는 편이 브랜드가 살아난다. */
body.is_main #header .logo .lg_type{filter:brightness(0) invert(1); transition:filter .35s ease;}
/* [분리 2026-09-10] 전화 아이콘은 로고와 같은 반전을 걸면 안 된다.
   이 아이콘은 "파란 원 + 흰 수화기" 한 장이라, 통째로 흰색으로 만들면 수화기가 원에 녹아
   흰 동그라미만 남는다(무슨 아이콘인지 알 수 없다).
   대신 파란 원만 밝혀 어두운 헤더 위에서 또렷해지게 한다 - 흰 수화기는 그대로 남는다. */
body.is_main #header .util .tel_ico img{filter:brightness(1.5) saturate(1.15); transition:filter .35s ease;}
body.is_main #header .gnb > ul > li > a,
body.is_main #header .gnb > ul > li > a:hover,
body.is_main #header .gnb > ul > li.on > a{color:#fff;}
body.is_main #header .gnb > ul > li > a:after{background:#fff;}
body.is_main #header .util .tel{color:#fff;}
body.is_main #header .util a.tel:hover{color:rgba(255,255,255,.75);}
body.is_main #header .util .login{color:rgba(255,255,255,.75); border-bottom-color:rgba(255,255,255,.42);}
body.is_main #header .util .login:hover{color:#fff; border-bottom-color:#fff;}
body.is_main #header .m_btn i{background:#fff;}

/* 밝은 배경 구간 - 원래의 흰 헤더.
   :not(.hero_fx) #header.on 은 인터랙션 JS 가 뜨지 않았을 때의 대비책이다.
   hero_fx 는 인터랙션이 실제로 켜졌을 때만 붙으므로 둘 중 하나만 동작한다. */
body.is_main.hero_lit #header,
body.is_main:not(.hero_fx) #header.on{background:rgba(250,251,249,.98); border-bottom-color:var(--hs-line); box-shadow:0 2px 14px rgba(32,43,40,.06); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
body.is_main.hero_lit #header .logo img,
body.is_main.hero_lit #header .util .tel_ico img,
body.is_main:not(.hero_fx) #header.on .logo img,
body.is_main:not(.hero_fx) #header.on .util .tel_ico img{filter:none;}
body.is_main.hero_lit #header .gnb > ul > li > a,
body.is_main:not(.hero_fx) #header.on .gnb > ul > li > a{color:var(--hs-title);}
body.is_main.hero_lit #header .gnb > ul > li > a:hover,
body.is_main.hero_lit #header .gnb > ul > li.on > a,
body.is_main:not(.hero_fx) #header.on .gnb > ul > li > a:hover,
body.is_main:not(.hero_fx) #header.on .gnb > ul > li.on > a{color:var(--hs-brand);}
body.is_main.hero_lit #header .gnb > ul > li > a:after,
body.is_main:not(.hero_fx) #header.on .gnb > ul > li > a:after{background:var(--hs-brand);}
body.is_main.hero_lit #header .util .tel,
body.is_main:not(.hero_fx) #header.on .util .tel{color:var(--hs-title);}
body.is_main.hero_lit #header .util a.tel:hover,
body.is_main:not(.hero_fx) #header.on .util a.tel:hover{color:var(--hs-brand);}
body.is_main.hero_lit #header .util .login,
body.is_main:not(.hero_fx) #header.on .util .login{color:var(--hs-muted); border-bottom-color:var(--hs-hairline);}
body.is_main.hero_lit #header .util .login:hover,
body.is_main:not(.hero_fx) #header.on .util .login:hover{color:var(--hs-brand); border-bottom-color:var(--hs-brand);}
body.is_main.hero_lit #header .m_btn i,
body.is_main:not(.hero_fx) #header.on .m_btn i{background:var(--hs-title);}

/* 밝은 사진 장이 헤더 뒤에 있을 때 (2026-09-14, index.jsp 의 hsHeaderTone 이 body 에 hero_pale 을 붙인다).
   첫 화면 슬라이드에 밝은 수채화·밝은 벽 사진이 들어오면서 생긴 상태다 - 흰 글자는 읽히지 않고,
   그렇다고 흰 바(.hero_lit)를 깔면 사진 위쪽이 잘린 것처럼 보인다.
   그래서 바는 거의 투명하게 두고 글자만 어두운 색으로 - 글자색 규칙은 .hero_lit 과 같으니
   여기서는 바탕만 따로 정하고 글자는 아래 셀렉터에 hero_pale 을 덧붙여 함께 쓴다. */
body.is_main.hero_pale #header{background:rgba(250,251,249,.42); border-bottom-color:transparent; box-shadow:none;
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
body.is_main.hero_pale.at_top #header{background:rgba(250,251,249,.18);}
body.is_main.hero_pale #header .logo img,
body.is_main.hero_pale #header .util .tel_ico img{filter:none;}
body.is_main.hero_pale #header .gnb > ul > li > a{color:var(--hs-title);}
body.is_main.hero_pale #header .gnb > ul > li > a:hover,
body.is_main.hero_pale #header .gnb > ul > li.on > a{color:var(--hs-brand);}
body.is_main.hero_pale #header .gnb > ul > li > a:after{background:var(--hs-brand);}
body.is_main.hero_pale #header .util .tel{color:var(--hs-title);}
body.is_main.hero_pale #header .util a.tel:hover{color:var(--hs-brand);}
body.is_main.hero_pale #header .util .login{color:var(--hs-muted); border-bottom-color:var(--hs-hairline);}
body.is_main.hero_pale #header .util .login:hover{color:var(--hs-brand); border-bottom-color:var(--hs-brand);}
body.is_main.hero_pale #header .m_btn i{background:var(--hs-title);}

/* 드롭다운은 어두운 헤더 위에서도 흰 패널 그대로 - 글자색만 기본값으로 되돌린다 */
body.is_main #header .gnb .depth02 > li > a{color:var(--hs-body);}
body.is_main #header .gnb .depth02 > li > a:hover,
body.is_main #header .gnb .depth02 > li.on > a{color:var(--hs-brand);}


/* ===== FNB (footer.jsp) ===== */
#footer{background:linear-gradient(90deg, var(--hs-navy) 0%, var(--hs-navy) 100%); color:var(--hs-on-brand);}
#footer .footer_inner{width:100%; max-width:1184px; margin:0 auto; padding:72px 32px 48px; box-sizing:border-box;}
#footer .f_top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px;}
/* [로고 교체 2026-09-29] 새 로고(footer_logo_sinsa.png)는 원본의 빈 여백을 잘라낸 것이라
   예전처럼 왼쪽으로 당길 필요가 없다 - 로고 왼쪽 끝이 아래 회사정보 글자 라인과 그대로 맞는다.
   박스는 헤더와 같은 7.26:1 이어야 로고가 제 크기로 앉는다.
   [이전 값] 첫 번째 "(신사동)" 로고 기준 6.43:1 일 때 width:230px; height:36px;
             그 전 - 로고 PNG 좌측 여백(원본 1024px 중 81px) 보정 width:180px; height:44px; margin:0 0 20px -14px; */
#footer .f_logo{display:block; width:230px; height:32px; margin:0 0 20px; opacity:.92;}
#footer .f_logo img{display:block; width:100%; height:100%; object-fit:contain; object-position:left bottom;}
#footer .f_info{font-family:var(--hs-sans); font-size:15px; line-height:29.25px; color:rgba(246,250,248,.72);}
/* 전화번호는 회사정보 아래 한 단 띄워 세리프로 강조.
   010 이 대표번호, 그 아래 02 를 한 단 작게 보조로 둔다(2026-08-26) */
#footer .f_tel{display:flex; flex-direction:column; align-items:flex-start; margin-top:18px; gap:8px;}
#footer .f_tel a{display:inline-flex; align-items:baseline; gap:8px; font-family:var(--hs-serif); font-size:20px; font-weight:600; letter-spacing:0.5px; line-height:1; color:var(--hs-on-brand); transition:color .25s ease;}
#footer .f_tel a:hover{color:var(--hs-jade);}
#footer .f_tel .f_tel_label{font-family:var(--hs-sans); font-size:12px; font-weight:400; letter-spacing:1px; color:var(--hs-jade);}
#footer .f_time dt{margin-bottom:10px; font-size:13px; letter-spacing:2.86px; color:var(--hs-jade);}
#footer .f_time dd{font-size:15px; line-height:1.8; color:rgba(246,250,248,.72);}
#footer .f_bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:40px; padding-top:25px; border-top:1px solid rgba(246,250,248,.16);}
#footer .f_copy{font-size:13px; color:rgba(246,250,248,.5);}
#footer .f_policy{padding-bottom:3px; border-bottom:1px solid rgba(246,250,248,.3); font-size:13px; color:rgba(246,250,248,.6); transition:color .25s ease, border-color .25s ease;}
#footer .f_policy:hover{color:var(--hs-on-brand); border-color:rgba(246,250,248,.7);}

@media all and (max-width:1024px){
	#footer .footer_inner{padding:48px 16px 36px;}
	#footer .f_top{gap:28px;}
	#footer .f_info{font-size:14px; line-height:2;}
	#footer .f_tel{margin-top:14px;}
	#footer .f_tel a{font-size:18px;}
}

/* ===== 모바일 메뉴 (header.jsp #m_menu) ===== */
#m_menu .gnb_box > ul > li > a{font-family:var(--hs-sans);}
/* layout.css 가 `#m_menu .login_box{display:none}` 으로 감추고 있어 모바일에서 로그인 진입점이 아예 없었다.
   (PC 헤더의 로그인은 좁은 화면에서 숨기므로 여기가 유일한 통로다)
   layout.css 의 어두운 배경 + 흰 글씨 대신 사이트 톤으로 다시 그린다. */
#m_menu .login_box{display:block; padding:14px 16px; background:transparent; border-bottom:1px solid var(--hs-line); text-align:left;}
#m_menu .login_box a{display:inline-block; padding:0; font-family:var(--hs-sans); font-size:14px; font-weight:500; letter-spacing:0; color:var(--hs-brand);}
#m_menu .login_box a + a{margin-left:18px;}
#m_menu .login_box a:first-of-type:before{display:none;} /* layout.css 의 흰색 구분선 제거 */

/* 전화번호 - 메뉴를 열었을 때도 바로 통화할 수 있게 상단에 크게 둔다 */
#m_menu .m_tel_box{padding:14px 16px; background:rgba(62,122,108,.05); border-bottom:1px solid var(--hs-line);}
#m_menu .m_tel_box a{display:flex; align-items:center; gap:10px; font-family:var(--hs-serif); font-size:19px; font-weight:600; letter-spacing:0.4px; line-height:1.2; color:var(--hs-title);}
#m_menu .m_tel_box .tel_ico{flex:none; display:block; width:28px; height:28px;}
#m_menu .m_tel_box .tel_ico img{display:block; width:100%; height:100%; object-fit:contain;}
/* 하위메뉴(한의원소개/공지사항/오시는 길)가 있는 1뎁스에는 화살표를 붙여 "눌러서 펼침"을 알린다.
   layout.css 가 준비해 둔 .pull-right 아이콘 구조는 관리자 메뉴 전용 마크업이라 이 사이트 GNB 에는 없다.
   has_sub 클래스는 header.jsp 가 GNB 를 모바일 메뉴로 복제할 때 붙인다. */
#m_menu .gnb_box > ul > li.has_sub > a:after{content:''; flex:0 0 auto; width:7px; height:7px; margin-right:4px; border-right:1.5px solid #999; border-bottom:1.5px solid #999; transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s ease;}
#m_menu .gnb_box > ul > li.has_sub.on > a:after{transform:rotate(-135deg) translate(-2px,-2px);}

/* ===== 우측 고정 퀵메뉴 (footer.jsp #side_quick) =====
   회전 텍스트(세로 탭)는 폭이 좁아 가독성이 떨어져 아이콘+가로쓰기 카드형으로 변경. */
#side_quick{position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:800; display:flex; flex-direction:column; gap:10px; width:86px;}
#side_quick a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; width:100%; height:86px; padding:0; box-sizing:border-box; background:#fff; border:1px solid var(--hs-line); border-radius:12px; box-shadow:0 10px 24px rgba(32,43,40,.14); color:var(--hs-title); transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;}
#side_quick a .sq_ico{display:block; width:26px; height:26px;}
#side_quick a .sq_ico svg{display:block; width:100%; height:100%;}
#side_quick a .sq_txt{font-family:var(--hs-sans); font-size:14px; font-weight:500; letter-spacing:-0.2px; line-height:1; white-space:nowrap;}
#side_quick a:hover{background:var(--hs-navy); border-color:var(--hs-navy); color:var(--hs-on-brand); transform:translateY(-2px); box-shadow:0 14px 28px rgba(32,43,40,.22);}
/* 상담문의는 핵심 전환 경로라 기본 상태부터 푸터와 같은 네이비로 채워 강조 */
#side_quick a.sq_point{background:var(--hs-navy); border-color:var(--hs-navy); color:var(--hs-on-brand);}
#side_quick a.sq_point:hover{background:#0a3b64; border-color:#0a3b64;}

/* 맨 위로 버튼 (2026-09-15, footer.jsp .sq_top). 카드 두 장 아래에 같은 폭으로, 높이만 낮게.
   첫 화면을 지나기 전에는 숨긴다(스크립트가 is_on 을 붙인다) - 갈 곳이 없는 버튼을 보여 줄 이유가 없다.
   board.css 등 레거시 button 규칙이 새어 들지 않도록 값을 모두 명시한다. */
#side_quick .sq_top{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; height:64px; margin:0; padding:0; box-sizing:border-box;
	background:#fff; border:1px solid var(--hs-line); border-radius:12px; box-shadow:0 10px 24px rgba(32,43,40,.14); color:var(--hs-title); cursor:pointer; -webkit-appearance:none; appearance:none;
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .25s ease, border-color .25s ease, color .25s ease;}
#side_quick .sq_top.is_on{opacity:1; visibility:visible; transform:none;}
#side_quick .sq_top .sq_ico{display:block; width:20px; height:20px;}
#side_quick .sq_top .sq_ico svg{display:block; width:100%; height:100%;}
#side_quick .sq_top .sq_txt{font-family:var(--hs-sans); font-size:11px; font-weight:500; letter-spacing:1.5px; line-height:1;}
#side_quick .sq_top:hover{background:var(--hs-navy); border-color:var(--hs-navy); color:var(--hs-on-brand);}

/* 본문 최대폭(1184px) + 카드폭 기준으로, 1400px 미만에서는 카드가 본문 위로 올라온다.
   이 구간에서는 카드를 줄이고 화면 끝에 붙여 본문을 덜 가린다. */
@media all and (max-width:1400px){
	#side_quick{right:8px; gap:8px; width:70px;}
	#side_quick a{height:72px; gap:7px; border-radius:10px;}
	#side_quick a .sq_ico{width:22px; height:22px;}
	#side_quick a .sq_txt{font-size:13px;}
	#side_quick .sq_top{height:54px; border-radius:10px;}
}

@media all and (max-width:1024px){
	/* 좁은 화면에서는 하단 고정 바로 전환 - 우측 카드는 본문을 가린다 */
	#side_quick{top:auto; bottom:0; right:0; left:0; width:100%; gap:0; transform:none; flex-direction:row; box-shadow:0 -4px 16px rgba(32,43,40,.16);}
	#side_quick a{flex:1 1 50%; flex-direction:row; gap:8px; height:auto; padding:14px 0; border:0; border-radius:0; box-shadow:none;}
	#side_quick a + a{border-left:1px solid var(--hs-line);}
	#side_quick a:hover{transform:none; box-shadow:none;}
	#side_quick a .sq_ico{width:20px; height:20px;}
	#side_quick a .sq_txt{font-size:15px;}
	/* 하단 바에 푸터가 가리지 않도록 여백 확보 */
	#footer{padding-bottom:56px;}
	/* 맨 위로 버튼은 하단 바에서 떼어 오른쪽 아래, 바 바로 위에 원형으로 띄운다 */
	#side_quick .sq_top{position:fixed; right:14px; bottom:70px; width:46px; height:46px; gap:0; border-radius:50%; box-shadow:0 6px 16px rgba(32,43,40,.2);}
	#side_quick .sq_top .sq_txt{display:none;}
	#side_quick .sq_top .sq_ico{width:22px; height:22px;}
}

/* ===== 접근성: 화면에서만 숨김(스크린리더/SEO 노출) ===== */
.sr_only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ===== 모션 최소화 선호 사용자 대응 ===== */
@media (prefers-reduced-motion: reduce){
	*, *:before, *:after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ==========================================================================
   이하 기존 공통 보정 (비밀번호 토글 / 댓글)
   ========================================================================== */

/* 비밀번호 토글 아이콘 스타일 - 일반 폼 */
.password-toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    user-select: none;
    vertical-align: middle !important;
}

/* 로그인 폼 비밀번호 필드 - 눈 아이콘 위치 */
.new_login .input_form dl dd {
    position: relative !important;
}

.new_login .input_form dl dd .password-toggle-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

.password-toggle-icon:hover {
    opacity: 1;
}

.password-toggle-icon:hover svg {
    stroke: #000 !important;
}

.password-toggle-icon.active {
    opacity: 0.85;
}

.password-toggle-icon svg {
    display: block;
}

/* 댓글 입력 폼 비밀번호 필드 - 눈 아이콘 위치 */
.answer_wrapper .custom_box_bom {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.answer_wrapper .custom_box_bom input[type="password"],
.answer_wrapper .custom_box_bom input[type="text"] {
    flex: 1 !important;
    padding-right: 35px !important;
}

.answer_wrapper .custom_box_bom .password-toggle-icon {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

/* 댓글 관련 스타일 */
.comment-empty {
    text-align: center !important;
    padding: 80px 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #666 !important;
}

/* 소셜로그인 전용 로그인 화면 (www/member/config.jsp useJoin=false)
   - 회원가입 안내 블록이 빠지면 소셜 영역 아래 구분선/여백이 빈 채로 남는다. */
.login_social_wrapper.no_join {
	margin-bottom: 0;
	border-bottom: 0;
}

/* 소셜로그인 전용 로그인 화면 (www/member/config.jsp useNormalLogin=false)
   - 본문이 짧아 푸터가 화면 중간에 떠 보이므로 푸터를 화면 하단에 고정한다.
   - footer 높이가 폭에 따라 줄바꿈으로 연속 변하므로 px 차감(min-height) 방식은 못 쓴다.
   - 퀵메뉴 등 fixed 자식이 늘어나지 않도록 폭 지정은 .programCon 에만 한다. */
body.social_login_page #wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body.social_login_page .programCon.social_only {
	flex: 1 0 auto;
	width: 100%;   /* flex item 이 되면서 폭이 콘텐츠 크기로 줄어드는 것을 막는다 */
	display: flex;
	flex-direction: column;
	justify-content: center;   /* 본문이 짧으므로 남는 세로 공간에 중앙 배치 */
}
body.social_login_page .login_tit_flex_box01 {
	justify-content: center;   /* 일반 로그인 폼이 없으면 제목만 좌측에 남아 소셜 버튼과 축이 어긋난다 */
}
body.social_login_page .login_social_wrapper {
	/* 원래 제목 아래 오던 .login_form_wrapper 의 margin-top(40px) 과 같은 간격을 준다.
	   버튼 자체 padding-top 40px 과 합쳐져 제목~아이콘 80px 확보. */
	margin-top: 40px;
}

/* ==========================================================================
   [2026-10-01] 추천서 눌러서 크게 보기 (js/letter_zoom.js)
   메인·스승님 페이지의 .lt_frame 에 돋보기 표시를 얹고, 누르면 화면 가득 띄운다.
   표시는 액자 모서리에 겹쳐 놓아(position:absolute) 레이아웃 크기에는 영향이 없다.
   ========================================================================== */
.lt_frame.is_zoomable{position:relative; cursor:zoom-in;}
.lt_frame.is_zoomable::after{content:"+ 크게 보기"; position:absolute; right:12px; bottom:12px; padding:5px 10px;
	font-family:var(--hs-sans); font-size:12px; line-height:1.4; letter-spacing:-0.2px; color:#fff;
	background:rgba(32,43,40,.72); border-radius:2px; pointer-events:none;}
.lt_frame.is_zoomable:focus-visible{outline:2px solid var(--hs-brand); outline-offset:3px;}
.lt_zoom{position:fixed; inset:0; z-index:10000; background:rgba(20,24,22,.92); cursor:zoom-out;}
.lt_zoom_scroll{width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling:touch;
	display:flex; align-items:center; justify-content:center; padding:56px 16px 24px; box-sizing:border-box;}
.lt_zoom_scroll img{display:block; max-width:min(1600px, 100%); max-height:100%; width:auto; height:auto; margin:auto; background:#fff;}
.lt_zoom_close{position:absolute; top:10px; right:12px; width:44px; height:44px; padding:0; border:0; background:none;
	font-size:34px; line-height:44px; color:#fff; cursor:pointer;}
/* [2026-10-02] 두 장 묶음(메인 추천서) - 좌우 넘김 버튼과 아래 이름·쪽수. 아래 줄 자리만큼 바닥 여백을 더 둔다 */
.lt_zoom.is_group .lt_zoom_scroll{padding-bottom:52px;}
.lt_zoom_nav{position:absolute; top:50%; z-index:2; width:52px; height:52px; margin-top:-26px; padding:0; border:0; border-radius:50%;
	background:rgba(255,255,255,.14); font-size:34px; line-height:48px; color:#fff; cursor:pointer; transition:background .25s ease;}
.lt_zoom_nav:hover,
.lt_zoom_nav:focus-visible{background:rgba(255,255,255,.28); outline:none;}
.lt_zoom_prev{left:max(16px, 3vw);}
.lt_zoom_next{right:max(16px, 3vw);}
.lt_zoom_info{position:absolute; left:0; right:0; bottom:16px; margin:0; font-family:var(--hs-sans); font-size:14px;
	letter-spacing:.06em; text-align:center; color:rgba(255,255,255,.85); pointer-events:none;}
/* 휴대폰 세로 화면 - 가로로 넓은 추천서를 폭에 맞추면 여전히 작다. 높이에 맞춰 크게 띄우고 옆으로 밀어 읽게 한다 */
@media all and (max-width:640px) and (orientation:portrait){
	.lt_zoom_scroll{display:block; padding:56px 0 0;}
	.lt_zoom_scroll img{max-width:none; max-height:none; height:calc(100% - 8px); width:auto; margin:0;}
	.lt_zoom.is_group .lt_zoom_scroll img{height:100%;}
	.lt_zoom_nav{width:44px; height:44px; margin-top:-22px; font-size:30px; line-height:40px; background:rgba(0,0,0,.45);}
	.lt_zoom_prev{left:8px;}
	.lt_zoom_next{right:8px;}
}