@charset "utf-8";
/* 서브페이지 전용 스타일 — 레거시 차림(비주얼 배너·LNB)은 layout.css가 담당하고,
   이 파일은 (1) SEO용 태그 교체분(h1.logo→p.logo, #visual h2→p, #page_title h3→h1)의
   레거시 규칙 복제와 (2) 이관 콘텐츠(article.content)의 스타일을 담당한다. */

/* --- 1. 태그 교체분: layout.css의 태그 한정 규칙 복제 --- */
/* 모바일 p.logo 규칙은 layout.css 말미 공용 블록에 있음 (홈도 사용) */
#gnb_wrap p.logo{position:absolute;top:28px;left:0;width:206px;height:33px;background:url(/img/logo.png) no-repeat 0 0;text-indent:-9999px;overflow:hidden;}
#gnb_wrap p.logo a{display:block;height:100%;}
#visual p.vtitle{font-size:48px;line-height:56px;color:#232323;font-weight:600;letter-spacing:-0.8px;text-indent:-2px;}
#page_title h1{font-size:48px;line-height:60px;font-weight:500;color:#2a2118;letter-spacing:-1px;text-align:center;}

@media screen and (max-width:920px) {
#visual p.vtitle{font-size:33px;line-height:39px;letter-spacing:-0.8px;text-indent:0;}
#page_title h1{font-size:30px;line-height:36px;letter-spacing:-1px;text-indent:-1px;}
}
@media screen and (max-width:480px) {
#visual p.vtitle{font-size:27px;line-height:32px;letter-spacing:-0.4px;}
#page_title h1{font-size:21px;line-height:30px;font-weight:600;text-align:left;}
}

/* --- 2. 콘텐츠 스타일 (레거시 content.css의 시각 언어: 포인트 #f89828) --- */
.content{padding-top:20px;}
.content a{color:#f89828;}
.content a:has(figure){color:inherit;} /* 블록 전체를 감싸는 링크(책소개 등)는 본문색 유지 */
.content img{max-width:100%;height:auto;}
.content figure{margin:30px 0;text-align:center;}

.content h2{font-size:21px;font-weight:600;color:#333;line-height:26px;background:url(/img/bullet_h4.gif) no-repeat 0 5px;padding-left:25px;margin:55px 0 18px;}
.content h2:first-child{margin-top:10px;}
.content h3{font-size:18px;font-weight:500;color:#333;line-height:25px;letter-spacing:-0.5px;margin:32px 0 12px;}
.content h3 strong{color:#f89828;}
/* h4 규칙이 아예 없어 전역 리셋(*{margin:0}) 때문에 앞 문단에 붙어 있었음(14개 페이지 82곳).
   크기는 기존 10단계 스케일을 따라 h3(18px) 아래인 16px */
.content h4{font-size:16px;font-weight:600;color:#3a3a3a;letter-spacing:-0.5px;margin:26px 0 10px;}
.content em{font-style:normal;text-decoration:underline;text-underline-offset:3px;}

.lead{font-size:21px;color:#333;line-height:36px;letter-spacing:-1px;font-weight:300;text-align:center;margin-bottom:20px;}

blockquote{margin:35px 0;padding:28px 32px;background:#faf7f1;border-left:3px solid #f89828;}
.quote-title{font-size:18px;font-weight:600;color:#f89828;margin-bottom:10px;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:start;margin:30px 0;}
.two-col.cols-3070{grid-template-columns:3fr 7fr;}
.side-title{font-size:18px;font-weight:600;color:#2a2118;margin-bottom:5px;}
.side-sub{color:#888;font-size:16px;margin-top:0;}

.check-list{list-style:none;padding:0;}
.check-list li{padding:4px 0 4px 26px;position:relative;}
.check-list li::before{content:"✓";position:absolute;left:3px;color:#f89828;font-weight:700;}

.icon-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;text-align:center;}
.icon-grid figure{margin:0;}
.icon-grid img{max-width:90px;}
.icon-grid p{margin-top:8px;font-weight:600;}

/* 진료과목 3열 그리드 (레거시 overview4 디자인) */
.dept-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:50px 40px;margin-top:50px;}
.dept-grid li{border-top:1px solid #333;padding-top:50px;display:flex;flex-direction:column;}
.dept-grid figure{margin:0 0 45px;text-align:center;}
.dept-grid figure img{width:90px;}
.dept-grid li>div{background:#f4f2ef;padding:25px 28px;flex:1;}
.dept-grid li>div p:first-child{font-family:'Nanum Myeongjo',serif;font-size:21px;line-height:27px;font-weight:600;color:#f89828;margin-bottom:10px;}
.dept-grid .note{margin-top:10px;}

.box{border:1px solid #e8e4dc;background:#fff;padding:22px 28px;margin:30px 0;}
.note{color:#888;font-size:14px;line-height:24px;}

.info-table{width:100%;border-collapse:collapse;margin:20px 0;border-top:1px solid #333;}
.info-table th,.info-table td{padding:14px 18px;border-bottom:1px solid #e8e4dc;text-align:left;vertical-align:top;}
.info-table th{width:130px;color:#2a2118;font-weight:600;background:#faf8f4;}

details.more{margin:20px 0;border:1px solid #e8e4dc;background:#fff;padding:0 25px;}
details.more summary{cursor:pointer;font-weight:600;color:#2a2118;padding:16px 0;}
details.more[open] summary{border-bottom:1px solid #e8e4dc;}
details.more>div{padding:16px 0;}

.link-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.link-grid a{display:block;padding:13px 18px;border:1px solid #e8e4dc;color:#444;}
.link-grid a:hover{border-color:#f89828;color:#f89828;}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:15px;}
.gallery figure{margin:0;}
.gallery img{width:100%;height:200px;object-fit:cover;}

.empty-state{border:1px dashed #d8d3c8;padding:35px 25px;color:#888;text-align:center;}

/* 게시판 목록(공지사항·원장에세이). tbody 행만 BLOG-SYNC 마커 안에 있어 동기화 작업이 교체 */
.board-list{width:100%;border-collapse:collapse;margin:10px 0 40px;border-top:2px solid #2a2118;table-layout:fixed;}
/* 열 폭은 colgroup이 아니라 th에 준다 — col을 쓰면 모바일에서 번호 셀을 display:none 했을 때
   열 정의는 그대로 남아 제목/작성일이 한 칸씩 밀림(제목 폭이 0이 됨) */
.board-list th:nth-child(1){width:80px;}
.board-list th:nth-child(3){width:130px;}
.board-list th{padding:15px 10px;border-bottom:1px solid #d8d3c8;color:#2a2118;font-weight:600;background:#faf8f4;}
.board-list td{padding:16px 10px;border-bottom:1px solid #eae6de;color:#666;text-align:center;}
.board-list td.subject{text-align:left;padding-left:18px;padding-right:18px;}
/* 제목이 길면 한 줄로 자르고 말줄임표 — table-layout:fixed라야 열 폭이 밀리지 않음 */
.board-list td.subject a{display:block;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-list td.subject a:hover{color:#f89828;}
.board-list .empty td{padding:60px 20px;color:#888;}

/* 게시글 상세 */
.post-date{color:#999;font-size:14px;padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid #eae6de;}
.post-back{margin-top:45px;padding-top:25px;border-top:1px solid #eae6de;text-align:center;}
.post-back a{display:inline-block;padding:12px 32px;border:1px solid #d8d3c8;color:#555;}
.post-back a:hover{border-color:#f89828;color:#f89828;}
/* 게시글 본문은 전역 리셋 때문에 p 여백이 0이라 문단 구분이 없었음.
   .post-date를 가진 글 상세에서만 적용(진료과목 페이지의 .content는 그대로 둔다) */
.content:has(.post-date){max-width:820px;margin:0 auto;}
.content:has(.post-date) p:not([class]){margin-bottom:20px;}

/* 원인별 상세: 레거시의 아이콘 카드 그리드 + '자세히보기 +' 버튼을 복원.
   레거시는 팝업이었지만 여기서는 <details>를 그대로 써서 본문이 HTML에 남게 한다.
   펼치면 grid-column:1/-1로 전체 폭을 차지해 긴 본문을 좁은 카드 폭으로 읽지 않아도 된다 */
.detail-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:35px 0;align-items:start;}
.detail-cards details.more{margin:0;padding:0;height:100%;display:flex;flex-direction:column;transition:border-color .15s;}
/* summary가 카드 높이를 채워야 .btn의 margin-top:auto가 버튼을 바닥에 정렬한다
   (요약문 줄 수가 카드마다 달라 그냥 두면 버튼 높이가 제각각) */
.detail-cards details.more summary{flex:1;}
.detail-cards details.more:hover{border-color:#f89828;}
.detail-cards details.more[open]{grid-column:1/-1;border-color:#f89828;}
.detail-cards details.more summary{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:30px 20px;font-weight:400;}
.detail-cards details.more summary::-webkit-details-marker{display:none;}
.detail-cards details.more summary::marker{content:'';}
.detail-cards details.more summary img{width:64px;height:64px;}
.detail-cards details.more summary strong{font-size:18px;font-weight:600;color:#2a2118;letter-spacing:-0.5px;word-break:keep-all;}
.detail-cards details.more summary .exp{font-size:14px;line-height:22px;color:#777;word-break:keep-all;}
/* 라벨은 CSS로 넣는다 — 열림/닫힘 표시가 바뀌는 순수 장식이고,
   상태 자체는 <details>가 보조기기에 기본으로 알린다 */
.detail-cards details.more summary .btn{margin-top:auto;font-size:14px;color:#f89828;border:1px solid #f0ddc4;border-radius:18px;padding:6px 16px;}
.detail-cards details.more summary .btn::after{content:'자세히보기 +';}
.detail-cards details.more[open] summary .btn::after{content:'접기 −';}
.detail-cards details.more:hover summary .btn{background:#f89828;border-color:#f89828;color:#fff;}
/* 펼친 카드는 전체 폭이므로 세로 카드 배치 대신 가로 헤더로 바뀐다 */
/* 펼친 카드는 폭이 1100px을 넘어 좌우 여백이 40px이어도 글이 모서리에 붙어 보인다 — 64px */
.detail-cards details.more[open] summary{flex-direction:row;text-align:left;gap:18px;padding:24px 64px;border-bottom:1px solid #e8e4dc;}
.detail-cards details.more[open] summary img{width:42px;height:42px;flex:none;}
.detail-cards details.more[open] summary strong{flex:1;}
.detail-cards details.more[open] summary .exp{display:none;}
.detail-cards details.more[open] summary{flex:none;}
.detail-cards details.more[open] summary .btn{margin-top:0;flex:none;}
.detail-cards details.more>div{padding:30px 64px 38px;}
@media screen and (max-width:920px) {
.detail-cards{grid-template-columns:repeat(2,1fr);}
}
@media screen and (max-width:640px) {
.detail-cards{grid-template-columns:1fr;gap:14px;}
.detail-cards details.more summary{flex-direction:row;text-align:left;gap:14px;padding:18px 20px;flex-wrap:wrap;}
.detail-cards details.more summary img{width:44px;height:44px;flex:none;}
.detail-cards details.more summary strong{flex:1;font-size:17px;}
.detail-cards details.more summary .exp{flex-basis:100%;}
.detail-cards details.more>div{padding:18px 24px 24px;}
}
/* 모바일: 번호 열은 정보량 대비 자리를 많이 먹어 숨김(col 폭도 0으로 줄여야 빈 열이 안 남음) */
@media screen and (max-width:640px) {
.board-list th:nth-child(3){width:100px;}
.board-list th:first-child,.board-list td.num{display:none;}
.board-list th,.board-list td{padding:13px 6px;font-size:16px;}
.board-list td.subject{padding-left:4px;padding-right:12px;}
}

@media screen and (max-width:768px) {
.lead{font-size:18px;line-height:29px;}
.content h2{margin:40px 0 15px;}
}
@media screen and (max-width:920px) {
.dept-grid{grid-template-columns:repeat(2,1fr);gap:40px 25px;}
}
@media screen and (max-width:640px) {
.two-col,.two-col.cols-3070{grid-template-columns:1fr;gap:20px;}
.dept-grid{grid-template-columns:1fr;gap:35px;}
}
@media screen and (max-width:480px) {
.lead{font-size:18px;line-height:26px;text-align:left;}
.lead br{display:none;}
blockquote{padding:20px;}
.content h2{font-size:18px;line-height:24px;background-size:15px 15px;background-position:0 6px;padding-left:20px;}
.content h3{font-size:18px;}
.info-table th{width:90px;}
.info-table th,.info-table td{padding:10px 12px;}
}