@charset "utf-8";
/* ==========================================================================
서브페이지 공통 (.sub_page) + 오시는길 + 공지사항
- publish.md 3.4 : headHtml include 다음에 로 로드한다.
- 디자인 토큰(--hs-*)은 /css/custom.css 에 정의되어 있다.
- 한의원소개 전용(615px 수묵 히어로 / 원장인사 / 진료철학)은 /css/about.css 가 이어서 덮는다.
========================================================================== */
.sub_page{font-family:var(--hs-sans); color:var(--hs-body); background:#fff;}
.sub_page section{position:relative;}
.sub_page .inner{width:100%; max-width:1184px; margin:0 auto; padding:0 32px; box-sizing:border-box;}
/* 스크롤 등장 (과하지 않은 폭: 24px 이동 + 페이드) */
.sub_page .reveal{opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);}
.sub_page .reveal.is_in{opacity:1; transform:none;}
.sub_page .reveal.d1{transition-delay:.12s;}
.sub_page .reveal.d2{transition-delay:.24s;}
.sub_page .reveal.d3{transition-delay:.36s;}
/* 공통 소제목(라벨 + 제목) */
.sub_page .sec_head .label{display:block; font-size:12px; font-weight:500; letter-spacing:2.64px; line-height:1; color:var(--hs-accent);}
.sub_page .sec_head h2{margin-top:19.9px; font-family:var(--hs-serif); font-size:40px; font-weight:600; line-height:52.8px; letter-spacing:-0.4px; color:var(--hs-title);}
/* --------------------------------------------------------------------------
페이지 히어로 (디자인 기본 높이 422px - 한의원소개만 615px 로 확장)
-------------------------------------------------------------------------- */
.sub_page .hero{position:relative; height:422px; padding-top:128px; box-sizing:border-box; overflow:hidden; background-color:var(--hs-paper); border-bottom:1px solid var(--hs-line);
background-image:
radial-gradient(52% 78% at 12% 8%, rgba(62,122,108,.10) 0%, rgba(62,122,108,0) 62%),
radial-gradient(44% 66% at 88% 22%, rgba(47,110,180,.06) 0%, rgba(47,110,180,0) 60%),
radial-gradient(60% 80% at 55% 105%, rgba(157,193,181,.12) 0%, rgba(157,193,181,0) 58%);}
/* 진료 상세(항노화·보약한약·총명탕·난임·버거씨) / 치료후기 / 상담문의 히어로는 한지 배경 이미지를 쓴다.
해성한의원 카테고리(한의원소개·공지사항·오시는 길)는 위 기본 그라데이션을 그대로 유지한다. */
#care_page .hero,
#reply_page .hero,
#consult_page .hero{background-image:url('/img/contents_hero_bg.webp'); background-repeat:no-repeat; background-position:center center; background-size:cover;}
/* 공지사항(목록·상세)은 전용 수채 배경. 원본이 세로로 길어(2752x1536) 그냥 cover 로 깔면
우측 책 그림이 반쯤 잘려서, 세로 위치를 26% 로 올려 책이 히어로 안에 들어오게 맞춘다. */
#notice_page .hero{background-image:
linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,0) 70%),
url('/img/notice_bg.webp');
background-repeat:no-repeat, no-repeat; background-position:center center, center 49%; background-size:cover, cover;}
/* 오시는 길은 전용 수채 배경. 좌측 텍스트가 놓이는 영역만 흰 베일을 덧씌워 대비를 확보한다. */
#location_page .hero{background-image:
linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.46) 44%, rgba(255,255,255,0) 72%),
url('/img/location_bg.webp');
background-repeat:no-repeat, no-repeat; background-position:center center, center center; background-size:cover, cover;}
.sub_page .hero .inner{position:relative; z-index:2;}
.sub_page .hero_copy > *{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
.sub_page .hero.is_ready .hero_copy > *{opacity:1; transform:none;}
.sub_page .hero.is_ready .hero_copy h1{transition-delay:.2s;}
.sub_page .hero.is_ready .hero_copy p{transition-delay:.4s;}
.sub_page .hero_copy .label{display:block; font-size:13px; font-weight:500; letter-spacing:2.86px; line-height:1; color:var(--hs-accent);}
.sub_page .hero_copy h1{margin-top:22px; font-family:var(--hs-serif); font-size:clamp(32px, 3.2vw, 42px); font-weight:600; line-height:1.35; letter-spacing:-0.4px; color:var(--hs-title);}
/* [수정 2026-09-30] 오시는 길 주소 문구(21px)와 크기를 맞췄다. [이전 값] font-size:17px */
/* [수정 2026-09-30] 히어로 설명을 모든 서브페이지에서 굵게(스승님 페이지의 과 같은 굵기). [이전 값] font-weight:400 */
/* 모바일(900px 이하)에서만 줄을 바꾸는
- PC 에서는 숨긴다 */
/* [수정 2026-10-01] 히어로 설명(p)에도 같은 규칙을 쓴다. [이전 값] .sub_page .hero_copy h1 .mo_br{display:none;} */
.sub_page .hero_copy h1 .mo_br,
.sub_page .hero_copy p .mo_br{display:none;}
.sub_page .hero_copy p{margin-top:16px; max-width:700px; font-size:21px; font-weight:700; line-height:1.6; color:var(--hs-body); word-break:keep-all;}
/* ==========================================================================
오시는 길 (www/about/location/index.jsp)
========================================================================== */
/* 히어로 아래 한 줄 - 다른 서브페이지에서는 페이지를 소개하는 말이지만 이 페이지에서는 주소다.
찾아올 때 그대로 읽고 쓰는 정보라 한 단계 키우고 진하게 둔다(원장님 지시 2026-09-29).
⚠ .sub_page 공통 규칙(--hs-body)을 이 페이지에서만 덮어쓴다. 굵기는 2026-09-30 부터 공통(700)을 따른다. [이전 값] font-weight:500 */
#location_page .hero_copy p{font-size:clamp(18px, 1.5vw, 21px); color:var(--hs-title);}
/* [개편 2026-09-29] 좌우 2열(지도 | 정보) → 안내가 위, 지도가 아래(원장님 지시).
[이전 값] .inner{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr); gap:64px; align-items:start;} */
#location_page .location{padding:136px 0; background:var(--hs-paper);}
#location_page .location .inner{display:block;}
/* 지도 - 섹션 맨 위에 본문과 같은 폭으로 놓인다.
⚠ 화면 좌우를 가득 채우는 풀블리드로 만들지 말 것(원장님 지시) - 그러려면 .inner 밖으로 빼야 한다.
폭이 본문만큼(최대 1120px) 넓어졌으므로 예전 비율(688:431)을 그대로 쓰면 높이가 700px 까지 커진다 -
화면 높이에 맞춰 묶어 둔다.
⚠ 지도 크기는 JSP 하단 스크립트가 이 프레임 실측값으로 렌더한다 - 높이를 바꾸면 그 값도 따라 바뀐다.
[이전 값] aspect-ratio:688.39 / 430.98; */
#location_page .map_frame{position:relative; width:100%; height:clamp(340px, 42vh, 460px); overflow:hidden;
border:1px solid var(--hs-line); box-sizing:border-box; background:#f2f6f4;}
/* [이전 버전 - 되돌릴 때 아래 2줄을 살리고 현재 2줄을 지운다. index.jsp 의 지도 마크업(img + map_link)과 하단 카카오맵 스크립트도 함께 되돌릴 것]
map.jpg(1221x835)는 프레임(1.597)보다 세로가 길어 위아래가 잘린다. 병원 핀(세로 47%) 기준으로 맞췄다.
#location_page .map_frame img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 47%;}
#location_page .map_frame .map_link{position:absolute; inset:0; z-index:2;}
*/
/* 카카오맵 퍼가기(랜딩형). 지도 크기는 JSP 하단 스크립트에서 이 프레임 실측값으로 렌더하므로
여기서 강제 리사이즈하지 않는다(마커 위치가 틀어짐). 하단 주소·컨트롤 바는 프레임 밖으로 잘라낸다. */
#location_page .map_frame .root_daum_roughmap{position:absolute; left:0; top:0;}
#location_page .map_frame .root_daum_roughmap .wrap_map{margin:0;}
/* 안내 - 진료시간 · 문의 · 오시는 방법 세 덩어리.
[개편 2026-09-29] 오른쪽 좁은 칸에 세로로 쌓던 것을, 지도가 아래로 내려가면서 생긴 넓은 폭에
세 칸으로 나란히 편다. 세로로 그대로 두면 한 화면에 안 들어와 지도까지 한참 스크롤해야 한다.
[크기 조정 2026-09-15] 진료시간·전화·대중교통 글자를 한 단계씩 키웠다(원장님 지시).
[이전 값] label 13px / dt·dd 17px / tel 30px / tel_sub 18px / btn_tel 13px / loc_way 16px
[이전 배치] .loc_info > * + *{margin-top:44px;} 만으로 세로로 쌓았다 */
#location_page .loc_info{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(32px, 4vw, 72px);
margin-top:clamp(52px, 6.5vh, 80px); align-items:start;}
#location_page .loc_info .label{display:block; font-size:15px; font-weight:500; letter-spacing:2.86px; line-height:1; color:var(--hs-accent);}
/* 진료시간 */
#location_page .loc_hours dl{margin-top:18px;}
#location_page .loc_hours div{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-bottom:14px; border-bottom:1px solid var(--hs-line);}
#location_page .loc_hours div + div{margin-top:16px;}
#location_page .loc_hours dt{font-size:21px; font-weight:500; color:var(--hs-title);}
#location_page .loc_hours dd{font-size:21px; font-weight:600; color:var(--hs-title);}
/* 주말 진료를 한 번 더 말하는 한 줄(2026-09-15, 메인과 같은 문구) */
#location_page .loc_hours .hours_note{margin-top:16px; font-family:var(--hs-serif); font-size:19px; font-weight:500; line-height:1.5; color:var(--hs-brand); word-break:keep-all;}
/* 문의 */
#location_page .loc_tel strong{display:flex; align-items:center; gap:12px; margin-top:12px; font-family:var(--hs-serif); font-size:clamp(34px, 2.6vw, 40px); font-weight:600; line-height:1.2; color:var(--hs-title);}
/* 수화기 아이콘 - 헤더와 같은 규칙(번호 앞에 하나) */
#location_page .loc_tel .tel_ico{flex:none; display:block; width:32px; height:32px;}
#location_page .loc_tel .tel_ico img{display:block; width:100%; height:100%; object-fit:contain;}
/* 010 이 대표번호, 그 아래 02 를 한 단 작게 보조로 둔다(2026-08-26) */
#location_page .loc_tel .tel_sub{display:block; margin-top:8px; padding-left:44px; font-size:22px; font-weight:500; color:var(--hs-body); transition:color .25s ease;}
#location_page .loc_tel .tel_sub:hover{color:var(--hs-brand);}
#location_page .loc_tel .btn_tel{display:inline-flex; align-items:center; justify-content:center; margin-top:22px; padding:12px 24px; border:1px solid #005aab; font-size:16px; font-weight:500; letter-spacing:0.4px; color:#005aab; background:transparent; transition:background-color .25s ease, color .25s ease;}
#location_page .loc_tel .btn_tel:hover{background:#005aab; color:#fff;}
/* 대중교통 · 주차안내 - 한 덩어리(.loc_way) 안에 라벨 + 목록이 두 벌 들어간다 */
#location_page .loc_way ul{margin-top:12px;}
#location_page .loc_way li{font-size:19px; line-height:1.8; color:var(--hs-title); word-break:keep-all;}
/* [정리 2026-09-29] 두 번째 라벨("주차안내")이 앞 목록에 딱 붙어(간격 0) 대중교통 항목의 둘째 줄처럼 읽혔다.
덩어리 사이를 벌리고 가는 선으로 나눈다 - 위 진료시간·문의 덩어리끼리는 .loc_info > * + * 가 44px 로
떼어 놓고 있으니, 한 덩어리 안에서는 그보다 좁게 잡아야 층이 뒤집히지 않는다. */
#location_page .loc_way ul + .label{display:block; margin-top:28px; padding-top:26px; border-top:1px solid var(--hs-line);}
/* 항목이 둘 이상일 때 줄끼리 붙지 않게 - 안내 문장이 두 줄로 접히면 어디서 항목이 바뀌는지 안 보인다 */
#location_page .loc_way li + li{margin-top:10px;}
/* 주의 문구 - 안내가 아니라 못 하는 것을 알리는 줄이라 한 톤 낮추고 ※ 를 앞에 세운다 */
#location_page .loc_way li.note{position:relative; padding-left:22px; font-size:17px; color:var(--hs-muted);}
#location_page .loc_way li.note:before{content:'\203B'; position:absolute; left:0; top:0;}
/* ==========================================================================
공지사항 - 게시판 목록 디자인 (www/board/notice/)
- 게시판 공통 마크업(.recruitment_table01 .box)을 디자인 톤으로 덮어쓴다.
- board.css 는 전역 공유 파일이라 수정하지 않고 여기서만 스코프 오버라이드. (publish.md 3.4)
========================================================================== */
#notice_page{background:var(--hs-paper);}
#notice_page .programCon{padding:88px 0 160px;}
#notice_page .programCon > .inner{width:100%; max-width:1184px; margin:0 auto; padding:0 32px; box-sizing:border-box;}
/* 분류 탭 - 분류가 등록된 경우에만 노출되며, 본문과 같은 폭으로 맞춘다 */
#notice_page .prd_tab_wrapper{border-bottom:1px solid var(--hs-line); background:none;}
#notice_page .prd_tab_wrapper .inner{width:100%; max-width:1184px; margin:0 auto; padding:0 32px; box-sizing:border-box;}
/* 검색 영역 - 디자인 톤에 맞춰 얇은 밑줄형으로 정리 */
#notice_page .prd_search_wrapper02{display:flex; justify-content:flex-end; gap:10px; margin-bottom:32px; background:none; border:0; padding:0;}
#notice_page .prd_search_wrapper02 .l_box001{display:flex; gap:10px;}
#notice_page .prd_search_wrapper02 select{height:42px; padding:0 30px 0 12px; border:1px solid var(--hs-line); border-radius:0; font-family:var(--hs-sans); font-size:14px; color:var(--hs-body); background-color:#fff;}
#notice_page .program_search_box01{position:relative; display:flex; align-items:center; width:260px; height:42px; border:1px solid var(--hs-line); background:#fff;}
#notice_page .program_search_box01 input{flex:1; height:40px; padding:0 12px; border:0; background:none; font-family:var(--hs-sans); font-size:14px; color:var(--hs-title);}
#notice_page .program_search_box01 a{flex:none; padding:0 12px;}
#notice_page .program_search_box01 img{display:block; width:16px; height:auto;}
/* 목록 - 한 줄 = 분류뱃지 + 제목 + 날짜 */
#notice_page .recruitment_table01{border-top:1px solid var(--hs-line);}
#notice_page .recruitment_table01 .box{display:flex; align-items:center; gap:32px; width:100%; min-height:0; margin:0; padding:30px 8px 31px; border-bottom:1px solid var(--hs-line); box-sizing:border-box; background:none; transition:background-color .25s ease;}
#notice_page .recruitment_table01 .box:hover{background:rgba(62,122,108,.04);}
#notice_page .noice_board_alt_box{display:flex; align-items:center; gap:32px; flex:1 1 auto; min-width:0;}
#notice_page .recruitment_table01 .tit{display:flex; align-items:center; gap:32px; flex:1 1 auto; min-width:0; margin:0; padding:0;}
#notice_page .recruitment_table01 .tit .up_btnw{flex:none; display:inline-flex; align-items:center;}
#notice_page .recruitment_table01 .tit .up_btnw:empty{display:none;}
#notice_page .recruitment_table01 .tit .title_value{flex:1 1 auto; min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--hs-sans); font-size:18px; font-weight:400; line-height:1.5; color:var(--hs-title);}
/* 조회수는 디자인상 미노출 (userCon 은 집계 목적으로 유지) */
#notice_page .recruitment_table01 .date_box.views{display:none;}
#notice_page .recruitment_table01 .box:hover .title_value{color:var(--hs-brand);}
#notice_page .recruitment_table01 .date_box{flex:none; width:auto; margin:0; padding:0; font-family:'IBM Plex Mono','Consolas','Courier New',monospace; font-size:12px; color:var(--hs-muted);}
/* 분류 뱃지 (카테고리) - 디자인상 좌측 고정 폭 */
#notice_page .category_badge{flex:none; display:inline-block; min-width:32px; padding:4px 10px; font-size:12px; font-weight:500; letter-spacing:0.96px; line-height:1.5; text-align:center; color:var(--hs-body); background:#f2f6f4;}
/* 공지(상단고정) 글은 진한 배경으로 구분 */
#notice_page .recruitment_table01 .noti_icon{display:inline-block; margin-right:8px; padding:4px 10px; font-size:12px; font-weight:500; letter-spacing:0.96px; line-height:1.5; color:#f6faf8; background:#1c443d; border-radius:0;}
#notice_page .recruitment_table01 .new_icon{margin-left:8px; font-size:11px; color:var(--hs-accent); background:none;}
/* 게시글 없음 */
#notice_page .recruitment_table01 + p{border-bottom:1px solid var(--hs-line);}
/* ==========================================================================
진료 상세 (www/care/{키}/index.jsp - /include/care_view.jsp 공통 뷰)
========================================================================== */
#care_page .care_intro{padding:136px 0; background:var(--hs-paper);}
#care_page .care_intro .inner{display:flex; justify-content:center; align-items:center; gap:72px;}
#care_page .care_text{flex:0 1 524px; min-width:0;}
#care_page .care_text .sec_head h2{margin-top:18.9px;}
#care_page .care_text .desc{margin-top:28px; max-width:520px; font-size:18px; line-height:36px; color:var(--hs-body); word-break:keep-all;}
/* 키워드 태그 */
#care_page .care_tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px;}
#care_page .care_tags li{padding:5px 11px; border:1px solid var(--hs-line); font-size:12px; line-height:1.3; letter-spacing:0.72px; color:var(--hs-muted);}
/* 상담문의 버튼 */
#care_page .care_text .btn_line{display:inline-flex; align-items:center; justify-content:center; margin-top:36px; padding:12px 28px; border:1px solid var(--hs-brand); font-size:14px; font-weight:500; letter-spacing:0.56px; color:var(--hs-brand); background:transparent; transition:background-color .25s ease, color .25s ease;}
#care_page .care_text .btn_line:hover{background:var(--hs-brand); color:#fff;}
/* 진료 사진 자리 (사진 확정 전까지 자리표시 패널) */
#care_page .care_photo{position:relative; flex:0 1 526px; aspect-ratio:526 / 447.39; overflow:hidden; border:1px solid var(--hs-line); box-sizing:border-box; background:#f2f6f4;}
#care_page .care_photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:center center;}
/* 다른 진료 보기 - 메인 페이지 진료 이미지를 카드 배경으로 쓰고 그 위에 진료명을 얹는다.
[개편 2026-09-21] 4열 → 5열. 카드는 현재 진료를 뺀 다섯 장이라 4열이면 마지막 한 장이 둘째 줄에 홀로 남았다.
다섯 장을 한 줄에 세우면서 세로 카드(4:5)로 바꿨다 - 한 장 폭이 좁아져 가로 카드(4:3)로는 사진이 납작해진다.
글자는 사진 전체를 누르던 어두운 베일 대신 아래쪽만 덮는다 - 사진이 먼저 보이고 이름은 그 위에 얹힌다.
[이전 값] grid 4열 gap 20px / aspect-ratio 4:3 / strong 22px padding 22px 20px */
#care_page .care_other{padding:112px 0; background:#f2f6f4; border-top:1px solid var(--hs-line);}
#care_page .care_other_links{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-top:44px;}
#care_page .care_other_links a{position:relative; display:block; aspect-ratio:4 / 5; overflow:hidden; border:1px solid var(--hs-line); box-sizing:border-box; background:#e6ece9;}
#care_page .care_other_links .thumb{position:absolute; inset:0; display:block;}
#care_page .care_other_links .thumb img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .7s cubic-bezier(.22,.61,.36,1);}
/* 사진 위 글자 가독성 확보 - 아래쪽만 어둡게 덮고 위쪽은 사진을 그대로 둔다 */
#care_page .care_other_links .thumb:after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,32,29,0) 38%, rgba(20,32,29,.30) 66%, rgba(20,32,29,.74) 100%); transition:opacity .35s ease;}
#care_page .care_other_links strong{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 14px 22px; font-family:var(--hs-serif); font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-0.3px; text-align:center; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45);}
/* 이름 아래 짧은 밑줄 - 마우스를 올리면 브랜드색으로 그어진다 */
#care_page .care_other_links strong:after{content:''; display:block; width:24px; height:1px; margin:12px auto 0; background:rgba(255,255,255,.55); transform:scaleX(.6); transform-origin:center; transition:transform .35s ease, background-color .35s ease;}
#care_page .care_other_links a:hover strong:after{transform:none; background:#fff;}
#care_page .care_other_links a:hover .thumb img{transform:scale(1.08);}
/* 썸네일 이미지 미확정 - 어두운 오버레이 대신 연한 배경에 진한 글씨로 (흰 글씨는 읽히지 않는다) */
#care_page .care_other_links a.is_empty .thumb:after{display:none;}
#care_page .care_other_links a.is_empty strong{color:var(--hs-title); text-shadow:none;}
#care_page .care_other_links a.is_empty strong:after{background:var(--hs-hairline);}
#care_page .care_other_links a.is_empty{background:#eef2f0;}
#care_page .care_other_links a:hover{border-color:var(--hs-brand);}
/* ==========================================================================
치료후기 - 카드 그리드 (www/board/reply/)
- 게시판 공통 마크업(.recruitment_table01 .box.review)을 카드형으로 덮어쓴다.
========================================================================== */
#reply_page{background:var(--hs-paper);}
#reply_page .programCon{padding:88px 0 160px;}
#reply_page .programCon > .inner{width:100%; max-width:1184px; margin:0 auto; padding:0 32px; box-sizing:border-box;}
/* 검색 영역 - 시안에 없어 숨김. 되살리려면 이 한 줄만 지우면 된다(폼은 그대로 두어 more() 스크립트 참조 유지). */
#reply_page .prd_search_wrapper02{display:none;}
/* 진료 분류 탭 */
#reply_page .review_tabs{display:flex; flex-wrap:wrap; gap:32px; margin-bottom:40px; border-bottom:1px solid var(--hs-line);}
#reply_page .review_tabs a{display:inline-flex; align-items:center; justify-content:center; padding:12px 2px; border-bottom:2px solid transparent; font-family:var(--hs-sans); font-size:15px; font-weight:400; line-height:1.3; letter-spacing:0.26px; color:var(--hs-muted); transition:color .25s ease, border-color .25s ease;}
#reply_page .review_tabs a:hover{color:var(--hs-title);}
#reply_page .review_tabs a.on{font-weight:600; color:var(--hs-title); border-bottom-color:var(--hs-brand);}
/* 목업 카드는 이동할 글이 없으므로 커서를 바꾸지 않는다 */
#reply_page .box.review.is_mockup{cursor:default;}
/* 분류 탭 필터로 걸러진 카드 (인라인 style 을 쓰면 아래 "게시글 없음" 규칙에 걸린다) */
#reply_page .recruitment_table01 .box.review.is_hide{display:none;}
/* 카드 그리드 2열 */
#reply_page .recruitment_table01{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; border:0;}
#reply_page .recruitment_table01 .box.review{display:block; width:auto; min-height:0; margin:0; padding:33px; border:1px solid var(--hs-line); box-sizing:border-box; background:#fff; cursor:pointer; transition:border-color .25s ease, box-shadow .25s ease;}
#reply_page .recruitment_table01 .box.review:hover{border-color:var(--hs-jade); box-shadow:0 8px 22px rgba(32,43,40,.05);}
/* 목록 번호는 디자인상 미노출 */
#reply_page .recruitment_table01 .list_num_wrap{display:none;}
#reply_page .review_content_wrap{display:block; width:auto;}
/* 카드 머리줄 - 분류 뱃지(작성자) + 출처·날짜 */
#reply_page .review_head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;}
#reply_page .review_badge{flex:none; padding:4px 10px; font-size:12px; font-weight:500; letter-spacing:0.96px; line-height:1.5; color:#1c443d; background:rgba(0,90,171,.29);}
#reply_page .review_date{flex:none; font-family:'IBM Plex Mono','Consolas','Courier New',monospace; font-size:11px; line-height:1.5; color:var(--hs-muted);}
/* 제목 / 발췌 / 상세보기 */
#reply_page .recruitment_table01 .tit{display:block; margin:0; padding:0;}
#reply_page .recruitment_table01 .tit .title_value{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--hs-serif); font-size:23px; font-weight:600; line-height:32.2px; color:var(--hs-title);}
#reply_page .review_excerpt{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:9px; font-size:16px; line-height:28.8px; color:var(--hs-body);}
#reply_page .review_more{display:inline-block; margin-top:16px; padding-bottom:2px; border-bottom:1px solid var(--hs-brand); font-size:14px; font-weight:500; letter-spacing:0.56px; color:var(--hs-brand);}
#reply_page .recruitment_table01 .lock_iconn01{display:inline-block; vertical-align:middle; margin-right:6px;}
#reply_page .recruitment_table01 .lock_iconn01 img{width:12px; height:auto;}
#reply_page .recruitment_table01 .new_icon,
#reply_page .recruitment_table01 .noti_icon,
#reply_page .recruitment_table01 .new_ans_icon{margin-right:6px; font-size:11px; color:var(--hs-accent); background:none;}
/* 조회수/작성자 원본 메타는 카드 머리줄로 옮겼으므로 숨김 */
#reply_page .review_meta_wrap{display:none;}
/* 후기 남기기 버튼 */
#reply_page .new_write_btn_box{display:flex; justify-content:center; width:100%; max-width:none; margin:40px 0 0; padding:0; float:none;}
#reply_page .new_write_btn_box .login_chk_btn01{display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; height:auto; margin:0; padding:12px 28px; border:1px solid #005aab; border-radius:0; font-size:14px; font-weight:500; line-height:1.4; letter-spacing:0.56px; color:#f4f4f4; background:#005aab; transition:opacity .25s ease;}
#reply_page .new_write_btn_box .login_chk_btn01:hover{opacity:.88;}
/* 게시글 없음 - 카드(.box)는 제외한다. 카드에 인라인 style 이 붙으면 한 줄을 다 차지해 버린다. */
#reply_page .recruitment_table01 > div[style]:not(.box){grid-column:1 / -1;}
/* ==========================================================================
상담문의 - 폼메일 (www/consult/formMail/write.jsp)
========================================================================== */
#consult_page{background:var(--hs-paper);}
#consult_page .programCon{padding:88px 0 160px !important; background:var(--hs-paper) !important;}
#consult_page .consult_grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.8fr); gap:96px; align-items:start; width:100%; max-width:1184px; margin:0 auto; padding:0 32px; box-sizing:border-box;}
/* 좌측 입력 폼 - 게시판 공통 폼 마크업을 디자인 톤으로 덮는다 */
#consult_page .new_login_wrapper{width:auto; max-width:none; margin:0; padding:0; border:0; background:none;}
#consult_page .login_tit01{display:none;}
#consult_page .login_form_wrapper{width:auto; margin:0; padding:0;}
#consult_page .login_form_box01{display:block; width:100%; margin:0 0 28px; padding:0; border:0;}
#consult_page .login_label_tit01{display:block; margin:0 0 8px; padding:0; font-family:var(--hs-sans); font-size:13px; font-weight:500; letter-spacing:0.26px; line-height:1.3; color:var(--hs-title); background:none;}
#consult_page .login_input_form_box01,
#consult_page .login_form_flex_box01{display:block; width:100%; margin:0; padding:0; border:0; background:none;}
#consult_page .login_form_box01 input[type="text"],
#consult_page .login_form_box01 select,
#consult_page .form_textarea01{width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--hs-line); border-radius:0; font-family:var(--hs-sans); font-size:16px; line-height:1.4; color:var(--hs-title); background:#fff;}
#consult_page .login_form_box01 input[type="text"]::placeholder,
#consult_page .form_textarea01::placeholder{color:#757575;}
#consult_page .login_form_box01 input[type="text"]:focus,
#consult_page .login_form_box01 select:focus,
#consult_page .form_textarea01:focus{outline:none; border-color:var(--hs-accent);}
#consult_page .form_textarea01{min-height:150px; resize:vertical;}
/* 입력 보조 문구 (연락처 아래) */
#consult_page .form_help{display:block; margin-top:8px; font-size:12px; line-height:1.5; color:var(--hs-muted);}
/* 개인정보 동의 - 시안은 체크박스 한 줄. 약관 전문은 "전문보기" 링크로만 제공한다. */
#consult_page .login_etc_wrapper{margin-top:28px;}
#consult_page .login_etc_box01{display:none;}
#consult_page .id_save_box{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13px; color:var(--hs-body); cursor:pointer;}
#consult_page .id_save_box input[type="checkbox"]{width:18px; height:18px; margin:0; border:1px solid var(--hs-hairline); accent-color:var(--hs-brand);}
#consult_page .jeon_moon_btn{font-size:13px; color:var(--hs-accent); text-decoration:underline;}
/* 보내기 버튼 */
#consult_page .login_submit_btn_box01{margin-top:36px; text-align:left;}
#consult_page .login_submit_btn_box01 .login_chk_btn01{display:inline-flex; align-items:center; justify-content:center; width:auto; padding:15px 36px; border:0; border-radius:0; font-family:var(--hs-sans); font-size:16px; font-weight:500; letter-spacing:0.64px; color:var(--hs-on-brand); background:#005aab; transition:opacity .25s ease;}
#consult_page .login_submit_btn_box01 .login_chk_btn01:hover{opacity:.88;}
/* 카카오톡 문의 (2026-09-15) - 폼 자리를 대신하는 안내 + 채널 버튼 하나.
버튼은 카카오 브랜드 가이드(배경 #FEE500 · 검정 말풍선 · 검정 85% 라벨, 모서리 12px)를 따른다 - 로그인 버튼과 같은 규칙. */
#consult_page .kakao_box{padding-top:8px;}
#consult_page .kakao_box h2{font-family:var(--hs-serif); font-size:clamp(30px, 3vw, 44px); font-weight:600; line-height:1.4; letter-spacing:-0.6px; color:var(--hs-title); word-break:keep-all;}
#consult_page .kakao_box p{margin-top:22px; font-size:19px; line-height:1.8; color:var(--hs-body); word-break:keep-all;}
#consult_page .btn_kakao{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:320px; margin-top:40px; padding:20px 40px; border-radius:12px; background:#FEE500; font-size:20px; font-weight:600; letter-spacing:-0.2px; color:rgba(0,0,0,.85); transition:filter .25s ease, transform .25s ease;}
#consult_page .btn_kakao:hover{filter:brightness(.96); transform:translateY(-2px);}
#consult_page .btn_kakao .kakao_ico{flex:none; width:26px; height:26px; fill:#000;}
/* 우측 안내 컬럼. [크기 조정 2026-09-15] 전화·진료시간을 한 단계씩 키웠다(원장님 지시).
[이전 값] label 13px / tel 30px / tel_sub 18px / hours 16px / sns_txt 15px */
#consult_page .consult_side{padding-left:65px; border-left:1px solid var(--hs-line);}
#consult_page .consult_side > * + *{margin-top:36px;}
#consult_page .consult_side .label{display:block; margin-bottom:14px; font-size:15px; font-weight:500; letter-spacing:2.86px; line-height:1.3; color:var(--hs-accent);}
#consult_page .consult_side .tel{display:flex; align-items:center; gap:12px; font-family:var(--hs-serif); font-size:clamp(34px, 2.6vw, 40px); font-weight:600; line-height:1.2; color:var(--hs-title);}
/* 수화기 아이콘 - 헤더와 같은 규칙(번호 앞에 하나) */
/* 010 이 대표번호, 그 아래 02 를 한 단 작게 보조로 둔다(2026-08-26) */
#consult_page .consult_side .tel_sub{display:block; margin-top:8px; padding-left:44px; font-size:22px; font-weight:500; color:var(--hs-body); transition:color .25s ease;}
#consult_page .consult_side .tel_sub:hover{color:var(--hs-brand);}
#consult_page .consult_side .tel_ico{flex:none; display:block; width:32px; height:32px;}
#consult_page .consult_side .tel_ico img{display:block; width:100%; height:100%; object-fit:contain;}
#consult_page .consult_side .hours{font-size:20px; font-weight:500; line-height:1.9; color:var(--hs-title);}
#consult_page .consult_side .hours_note{margin-top:10px; font-family:var(--hs-serif); font-size:18px; font-weight:500; line-height:1.5; color:var(--hs-brand); word-break:keep-all;}
#consult_page .consult_side .sns_txt{font-size:16px; line-height:1.8; color:var(--hs-muted); word-break:keep-all;}
/* ── 진료시간 두 칸 정렬 (2026-09-23 원장님 지시 - 가독성·구분감) ──────────────────
선·상자 없이 요일 | 시간 두 칸으로 줄만 맞춘다. 요일 칸 폭을 고정해 시간이 세로로 한 줄에 선다.
요일은 작고 옅게, 시간은 크고 진하게 - 크기·농도 차이만으로 두 칸이 갈린다.
안내 두 줄은 한 칸 띄워 기존 .hours_note(초록 명조) 그대로 둔다.
[다른 시안 - 줄 구분선 표 + 초록 안내 상자는 원장님이 별로라 하셔서 버렸다] */
#consult_page .consult_side .hours_tbl{margin:0;}
#consult_page .consult_side .hours_tbl div{display:flex; align-items:baseline; gap:0;}
#consult_page .consult_side .hours_tbl div + div{margin-top:10px;}
/* [수정 2026-10-16] 76px 칸에 '일요일·공휴일'이 안 들어가 두 줄로 꺾이던 것 - 칸을 넓히고 nowrap. 시간 열 정렬은 그대로 유지 */
#consult_page .consult_side .hours_tbl dt{flex:0 0 120px; white-space:nowrap; font-size:16px; font-weight:400; color:var(--hs-muted);}
#consult_page .consult_side .hours_tbl dd{margin:0; font-size:21px; font-weight:500; letter-spacing:.2px; color:var(--hs-title);
font-variant-numeric:tabular-nums;}
#consult_page .consult_side .hours_tbl + .hours_note{margin-top:22px;}
/* --------------------------------------------------------------------------
반응형
-------------------------------------------------------------------------- */
@media all and (max-width:1180px){
#care_page .care_intro{padding:104px 0;}
#care_page .care_intro .inner{gap:48px;}
#care_page .care_other{padding:88px 0;}
#care_page .care_other_links{gap:12px; margin-top:36px;}
#care_page .care_other_links strong{padding:0 10px 18px; font-size:18px;}
#care_page .care_other_links strong:after{margin-top:10px;}
#reply_page .programCon,
#consult_page .programCon{padding:72px 0 110px;}
#consult_page .programCon{padding:72px 0 110px !important;}
#consult_page .consult_grid{gap:56px;}
#consult_page .consult_side{padding-left:40px;}
.sub_page .hero{height:360px; padding-top:104px;}
/* [수정 2026-09-21] 46px 는 넓은 화면(상한 42px)보다 오히려 컸다 - 화면이 줄면 글자도 줄어야 한다 */
.sub_page .hero_copy h1{font-size:38px; line-height:1.32;}
.sub_page .sec_head h2{font-size:34px; line-height:1.35;}
#location_page .location{padding:104px 0;}
#location_page .loc_info{gap:40px;}
#notice_page .programCon{padding:72px 0 110px;}
}
@media all and (max-width:900px){
.sub_page .inner{padding:0 20px;}
.sub_page .hero{height:auto; min-height:0; padding:80px 0 72px;}
.sub_page .hero_copy h1{margin-top:18px; font-size:36px;}
.sub_page .hero_copy h1 .mo_br,
.sub_page .hero_copy p .mo_br{display:inline;}
.sub_page .hero_copy p{margin-top:14px; font-size:17px; line-height:1.8;}
.sub_page .sec_head h2{font-size:30px;}
/* 오시는 길 - 좁은 화면에서는 세 칸을 풀어 세로로 쌓는다(지도는 그대로 맨 아래) */
#location_page .location{padding:64px 0 72px;}
#location_page .loc_info{display:block; margin-top:40px;}
#location_page .loc_info > * + *{margin-top:36px;}
#location_page .map_frame{height:clamp(300px, 50vh, 400px);}
#location_page .loc_hours dt,
#location_page .loc_hours dd{font-size:18px;}
#location_page .loc_tel strong{font-size:30px;}
#location_page .loc_tel .tel_sub{font-size:19px;}
#location_page .loc_way li{font-size:17px;}
#location_page .loc_way li.note{font-size:15px; padding-left:20px;}
#location_page .loc_way ul + .label{margin-top:22px; padding-top:20px;}
/* 공지사항 - 뱃지/제목 한 줄, 날짜 아래 줄 */
#notice_page .programCon{padding:56px 0 80px;}
#notice_page .programCon > .inner{padding:0 20px;}
#notice_page .prd_search_wrapper02{justify-content:flex-start; flex-wrap:wrap;}
#notice_page .program_search_box01{width:calc(100% - 110px); min-width:0;}
#notice_page .recruitment_table01 .box{align-items:flex-start; gap:14px; padding:22px 4px;}
#notice_page .noice_board_alt_box{flex-wrap:wrap; gap:8px 14px;}
#notice_page .recruitment_table01 .tit{flex:1 1 100%;}
#notice_page .recruitment_table01 .tit .title_value{white-space:normal; font-size:16px; line-height:1.6;}
#notice_page .recruitment_table01 .date_box{flex:1 1 100%;}
/* 진료 상세 - 텍스트 위, 사진 아래 */
#care_page .care_intro{padding:64px 0 72px;}
#care_page .care_intro .inner{display:block;}
/* 시안용 줄바꿈은 좁은 화면에서 어색하게 끊기므로 해제하고 자연 줄바꿈에 맡긴다 */
#care_page .care_text .sec_head h2 br{display:none;}
#care_page .care_text .sec_head h2{word-break:keep-all;}
#care_page .care_text .desc{margin-top:20px; font-size:16px; line-height:1.9;}
#care_page .care_text .btn_line{margin-top:28px;}
#care_page .care_photo{margin-top:40px;}
#care_page .care_other{padding:56px 0 64px;}
/* 좁은 화면에서는 다섯 장을 가로로 넘겨 본다(2열이면 마지막 한 장이 홀로 남는다).
카드 폭을 화면의 절반 남짓으로 두어 다음 장이 살짝 보이게 - 넘길 수 있다는 표시다.
양 끝 여백은 .inner 의 좌우 padding(20px) 을 음수 margin 으로 밀어내고 padding 으로 되돌린다. */
#care_page .care_other_links{display:flex; gap:12px; margin:26px -20px 0; padding:0 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none;}
#care_page .care_other_links::-webkit-scrollbar{display:none;}
#care_page .care_other_links a{flex:0 0 min(56vw, 240px); scroll-snap-align:start;}
#care_page .care_other_links strong{padding:0 10px 16px; font-size:17px;}
#care_page .care_other_links strong:after{margin-top:8px;}
/* 치료후기 - 1열 카드 */
#reply_page .programCon{padding:56px 0 80px;}
#reply_page .programCon > .inner{padding:0 20px;}
#reply_page .prd_search_wrapper02{justify-content:flex-start; flex-wrap:wrap; margin-bottom:28px;}
#reply_page .program_search_box01{width:calc(100% - 110px); min-width:0;}
/* 분류 탭은 줄바꿈 대신 가로 스크롤 (좁은 화면에서 두 줄로 깨지는 것 방지) */
#reply_page .review_tabs{flex-wrap:nowrap; gap:22px; margin-bottom:28px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
#reply_page .review_tabs::-webkit-scrollbar{display:none;}
#reply_page .review_tabs a{flex:none; font-size:14px;}
#reply_page .recruitment_table01{grid-template-columns:minmax(0,1fr);}
#reply_page .recruitment_table01 .box.review{padding:24px 20px;}
#reply_page .recruitment_table01 .tit .title_value{white-space:normal; font-size:20px; line-height:1.5;}
#reply_page .review_excerpt{white-space:normal; font-size:15px; line-height:1.8;}
/* 상담문의 - 폼 위, 안내 아래 */
#consult_page .programCon{padding:56px 0 80px !important;}
#consult_page .consult_grid{display:block; padding:0 20px;}
#consult_page .consult_side{margin-top:48px; padding:32px 0 0; border-left:0; border-top:1px solid var(--hs-line);}
#consult_page .consult_side .tel{font-size:30px;}
#consult_page .consult_side .tel_sub{font-size:19px;}
#consult_page .consult_side .hours{font-size:18px;}
#consult_page .consult_side .hours_tbl dt{flex-basis:108px; font-size:15px;}
#consult_page .consult_side .hours_tbl dd{font-size:19px;}
#consult_page .login_submit_btn_box01 .login_chk_btn01{width:100%;}
#consult_page .kakao_box h2{font-size:28px;}
#consult_page .kakao_box p{font-size:17px;}
#consult_page .kakao_box p br{display:none;}
#consult_page .btn_kakao{width:100%; min-width:0; margin-top:30px; padding:18px 24px; font-size:18px;}
}