@charset "utf-8";
/* =========================================================
   건강백과 (질환 · 치료방법 · 진료안내) — dp_gallery_health
   사이트 공통 톤 : 네이비 #0a2b6f / 블루 #006ce1 / Noto Sans KR
   ※ 전역 bootstrap 3 와 충돌하지 않도록 모든 규칙은 .health_* 하위로 한정
   ========================================================= */


/* ---------- 공통 래퍼 ---------- */
.health_wrap{padding:60px 0 120px;color:#222;font-family:'Noto Sans KR',sans-serif;letter-spacing:-0.025em;}
.health_wrap *{box-sizing:border-box;}
.health_inner{width:1200px;margin:0 auto;}
.health_wrap a{font-size:inherit;color:inherit;text-decoration:none;}
.health_wrap .pageBox a{font-size:12px;color:#a9a9a9;} /* 공통 a:link 값 유지 (치료후기와 동일) */
.health_wrap a:hover,.health_wrap a:focus{text-decoration:none;}
.health_wrap ul,.health_wrap ol{margin:0;padding:0;list-style:none;}
.health_wrap p{margin:0;}
.health_wrap img{max-width:100%;}

/* ---------- 분류 탭 (질환 게시판) ---------- */
.health_cate{margin-bottom:40px;}
.health_cate ul{display:flex;flex-wrap:wrap;border-top:1px solid #ddd;border-left:1px solid #ddd;}
.health_cate li{flex:1 1 0;min-width:0;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.health_cate li a{display:block;height:54px;line-height:54px;text-align:center;font-size:16px;font-weight:500;color:#444;white-space:nowrap;transition:background .2s,color .2s;}
.health_cate li a .num{margin-left:3px;font-size:13px;font-weight:400;color:#999;}
.health_cate li a:hover{background:#eff3f7;color:#0a2b6f;}
.health_cate li.on a{background:#0a2b6f;color:#fff;font-weight:700;}
.health_cate li.on a .num{color:#9fc3ff;}

/* ---------- 검색 (목록 상단) + 총 건수 ---------- */
.health_tool{margin-bottom:30px;}
.health_search{margin:0;}
/* 검색바·페이지네이션 : 치료후기(dp_gallery)와 동일한 공통 스타일(css_inbon/board.css) 사용, 위치만 목록 상단 */
.health_search .program_search{margin-top:0;}
.health_wrap .program_search,.health_wrap .pageBox{letter-spacing:normal;}
.health_wrap .pageBox ul{margin:0 0 10px;}
.health_total{display:flex;align-items:center;justify-content:space-between;margin-top:40px;padding-bottom:14px;border-bottom:2px solid #222;}
.health_total p{font-size:15px;color:#444;}
.health_total p b{color:#006ce1;font-weight:700;}
.health_total p .kw{margin-left:8px;color:#999;}

/* ---------- 카드 목록 (3열) ---------- */
.health_list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 30px;padding-top:10px;}
.health_card a{display:block;}
.health_card .thumb{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;background:#eff3f7;border:1px solid #eee;}
.health_card .thumb > img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.health_card a:hover .thumb > img{transform:scale(1.05);}
.health_card .thumb .ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#0a2b6f;}
.health_card .thumb .ph img{width:150px;height:auto;opacity:.95;}
.health_card .cate_badge{position:absolute;top:14px;left:14px;z-index:2;display:inline-block;padding:4px 12px;font-size:13px;font-weight:700;line-height:1.4;color:#0a2b6f;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);}
.health_card .info{padding:22px 2px 0;}
.health_card .tit{font-size:21px;font-weight:700;line-height:1.4;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s;}
.health_card .en{margin-top:4px;font-family:'Montserrat','Noto Sans KR',sans-serif;font-size:12px;font-weight:500;letter-spacing:.06em;color:#999;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.health_card .sum{height:3.2em;margin-top:12px;font-size:15px;line-height:1.6;color:#666;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.health_card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #eee;font-size:13px;color:#999;}
.health_card .meta .more{position:relative;padding-right:16px;font-weight:500;color:#0a2b6f;}
.health_card .meta .more:after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:right .2s;}
.health_card a:hover .tit{color:#0a2b6f;}
.health_card a:hover .meta .more{color:#006ce1;}
.health_card a:hover .meta .more:after{right:-2px;}
.health_card.is_notice .cate_badge{color:#fff;background:#006ce1;}
.health_empty{grid-column:1 / -1;padding:90px 0;text-align:center;font-size:16px;color:#999;border-bottom:1px solid #ddd;}

/* ---------- 페이지 ---------- */
.health_page{margin-top:20px;}

/* =========================================================
   상세
   ========================================================= */
.health_doc{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:60px;align-items:start;}
.health_doc .doc_body{min-width:0;}

/* 위치 */
.doc_bread{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:20px;font-size:13px;color:#999;}
.doc_bread > *{position:relative;}
.doc_bread > * + *{margin-left:22px;}
.doc_bread > * + *:before{content:"";position:absolute;left:-14px;top:50%;width:5px;height:5px;margin-top:-3px;border-top:1px solid #bbb;border-right:1px solid #bbb;transform:rotate(45deg);}
.doc_bread a:hover{color:#0a2b6f;}
.doc_bread > *:last-child{color:#0a2b6f;font-weight:500;}

/* 머리 */
.doc_head{padding-bottom:30px;border-bottom:2px solid #222;}
.doc_head .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.doc_head .tags span{display:inline-block;padding:3px 12px;font-size:13px;font-weight:500;line-height:1.5;color:#0a2b6f;border:1px solid #0a2b6f;}
.doc_head .tags span.fill{color:#fff;background:#0a2b6f;}
.doc_head h1{margin:0;font-size:42px;font-weight:700;line-height:1.3;letter-spacing:-0.04em;color:#111;}
.doc_head .en{margin-top:8px;font-family:'Montserrat','Noto Sans KR',sans-serif;font-size:16px;font-weight:500;color:#999;}
.doc_head .updated{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:22px;font-size:14px;color:#666;}
.doc_head .updated b{position:relative;margin-right:8px;padding-left:12px;font-weight:500;color:#444;}
.doc_head .updated b:before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:#006ce1;}

/* 모바일 목차 */
.health_doc .toc_m{display:none;margin-top:24px;border:1px solid #ddd;background:#fff;}
.health_doc .toc_m summary{display:flex;align-items:center;gap:10px;padding:14px 44px 14px 18px;font-size:15px;font-weight:700;color:#0a2b6f;cursor:pointer;list-style:none;position:relative;}
.health_doc .toc_m summary::-webkit-details-marker{display:none;}
.health_doc .toc_m summary:after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid #0a2b6f;border-bottom:2px solid #0a2b6f;transform:rotate(45deg);transition:transform .2s;}
.health_doc .toc_m[open] summary:after{margin-top:-2px;transform:rotate(-135deg);}
.health_doc .toc_m summary .cur{font-size:14px;font-weight:400;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.health_doc .toc_m ol{padding:6px 18px 14px;border-top:1px solid #eee;counter-reset:toc;}
.health_doc .toc_m ol a{display:block;padding:8px 0;font-size:15px;color:#444;}
.health_doc .toc_m ol a.on{color:#006ce1;font-weight:700;}

/* 핵심 요약 */
.doc_summary{margin-top:40px;padding:30px 34px;background:#eff3f7;border-left:4px solid #0a2b6f;}
.doc_summary .lab{margin-bottom:10px;font-size:14px;font-weight:700;color:#0a2b6f;}
.doc_summary p:not(.lab){font-size:20px;font-weight:500;line-height:1.65;color:#111;word-break:keep-all;}

/* 섹션 */
.doc_sec{padding-top:70px;}
.doc_sec h2{display:flex;align-items:center;gap:12px;margin:0 0 24px;padding-bottom:16px;font-size:28px;font-weight:700;line-height:1.35;letter-spacing:-0.04em;color:#111;border-bottom:1px solid #ddd;}
.doc_sec h2 .num{flex:none;display:inline-block;min-width:40px;height:26px;line-height:24px;padding:0 8px;text-align:center;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:0;color:#006ce1;border:1px solid #006ce1;}
.doc_sec_sm h2{font-size:22px;}
.doc_txt p,.doc_editor{font-size:17px;line-height:1.85;color:#333;word-break:keep-all;}
.doc_txt p + p{margin-top:16px;}
.doc_fig{margin:0 0 30px;padding:30px;text-align:center;background:#fff;border:1px solid #eee;}
.doc_fig img{display:inline-block;max-height:440px;width:auto;}

/* 체크 목록 (증상) */
.doc_check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.doc_check li.is-long{grid-column:1 / -1;}
.doc_check li{position:relative;padding:16px 18px 16px 52px;font-size:16px;line-height:1.6;color:#333;background:#fff;border:1px solid #e5e5e5;}
.doc_check li:before{content:"";position:absolute;left:18px;top:17px;width:22px;height:22px;border-radius:50%;background:#0a2b6f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat;}


/* 에디터 영역 (기본 서식만 공통 적용) */
.doc_editor img{display:block;height:auto;margin:10px auto;}
.doc_editor table{width:100% !important;margin:0 0 14px;border-collapse:collapse;border-top:2px solid #222;}
.doc_editor table td,.doc_editor table th{padding:16px 18px !important;font-size:16px;line-height:1.6;text-align:left;vertical-align:top;color:#444;border:0 !important;border-bottom:1px solid #ddd !important;background:none !important;}
.doc_editor table tr:first-child td{font-size:15px;color:#222;background:#f6f6f6 !important;}
.doc_editor table tr:not(:first-child) td:first-child{width:180px;color:#0a2b6f;}
.doc_editor table tr:not(:first-child) td:first-child b{color:#0a2b6f;}
/* 스마트에디터 표 : 표·셀에 들어가는 인라인 테두리/배경/크기/글자 서식을 위 디자인으로 통일 */
.doc_editor table{height:auto !important;border:0 !important;border-top:2px solid #222 !important;border-collapse:collapse !important;border-spacing:0;background:none !important;}
.doc_editor table tr{height:auto !important;background:none !important;}
.doc_editor table td,.doc_editor table th{width:auto !important;height:auto !important;word-break:keep-all;}
.doc_editor table tr:first-child td,.doc_editor table tr:not(:first-child) td:first-child{font-weight:700;}
.doc_editor table tr:not(:first-child) td:first-child{width:180px !important;}
.doc_editor table th{font-size:15px;font-weight:700;color:#222;background:#f6f6f6 !important;}
.doc_editor table thead + tbody tr:first-child td{font-size:16px;font-weight:400;color:#444;background:none !important;}
.doc_editor table thead + tbody tr:first-child td:first-child{width:180px !important;font-weight:700;color:#0a2b6f;}
.doc_editor table td p,.doc_editor table th p,.doc_editor table td div,.doc_editor table th div{margin:0 !important;padding:0 !important;}
.doc_editor table td p + p,.doc_editor table th p + p{margin-top:6px !important;}
.doc_editor table td p,.doc_editor table td span,.doc_editor table td font,.doc_editor table td div,
.doc_editor table th p,.doc_editor table th span,.doc_editor table th font,.doc_editor table th div{font-family:inherit !important;font-size:inherit !important;line-height:inherit !important;color:inherit !important;background:none !important;}
.doc_editor p{margin:0 0 14px;}
.doc_editor ul,.doc_editor ol{margin:0 0 14px;padding-left:22px;}
.doc_editor ul li{list-style:disc;margin:6px 0;}
.doc_editor ol li{list-style:decimal;margin:6px 0;}
.doc_editor strong,.doc_editor b{color:#111;font-weight:700;}
.doc_editor iframe{max-width:100%;}

/* FAQ */
.doc_faq{border-top:2px solid #222;}
.doc_faq details{border-bottom:1px solid #ddd;}
.doc_faq summary{position:relative;display:block;padding:22px 60px 22px 52px;font-size:17px;font-weight:500;line-height:1.55;color:#222;cursor:pointer;list-style:none;}
.doc_faq summary::-webkit-details-marker{display:none;}
.doc_faq summary:before{content:"Q";position:absolute;left:14px;top:21px;font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#006ce1;}
.doc_faq summary:after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid #999;border-bottom:2px solid #999;transform:rotate(45deg);transition:transform .2s;}
.doc_faq details[open] summary{color:#0a2b6f;font-weight:700;}
.doc_faq details[open] summary:after{margin-top:-2px;border-color:#0a2b6f;transform:rotate(-135deg);}
.doc_faq .ans{position:relative;margin:0 0 22px;padding:22px 26px 22px 52px;font-size:16px;line-height:1.8;color:#444;background:#f6f6f6;}
.doc_faq .ans:before{content:"A";position:absolute;left:16px;top:20px;font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0a2b6f;}

/* 의학 정보 검토 */
.doc_review{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border:1px solid #ddd;}
.doc_review .who{display:flex;align-items:center;gap:14px;}
.doc_review .who .role{display:inline-block;padding:3px 10px;font-size:13px;color:#006ce1;border:1px solid #006ce1;}
.doc_review .who strong{font-size:19px;font-weight:700;color:#111;}
.doc_review .date{font-size:14px;color:#666;}
.doc_review .date b{margin-right:8px;font-weight:500;color:#444;}

/* 진료 안내 CTA */
.doc_cta{display:flex;align-items:center;gap:40px;margin-top:70px;padding:44px 46px;color:#fff;background:#0a2b6f;}
.doc_cta .txt{flex:1;min-width:0;}
.doc_cta .lab{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;letter-spacing:.15em;color:#7fb2ff;}
.doc_cta h3{margin:8px 0 14px;font-size:26px;font-weight:700;color:#fff;}
.doc_cta .txt p:not(.lab){font-size:15px;line-height:1.75;color:rgba(255,255,255,.85);word-break:keep-all;}
.doc_cta .btns{flex:none;display:flex;flex-direction:column;gap:8px;width:230px;}
.doc_cta .btns a{display:block;height:48px;line-height:46px;padding:0 20px;font-size:15px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.45);transition:background .2s,color .2s;}
.doc_cta .btns a:hover{color:#0a2b6f;background:#fff;}
.doc_cta .btns a.tel{height:auto;line-height:1.2;padding:12px 20px;font-family:'Montserrat',sans-serif;font-size:24px;font-weight:700;color:#0a2b6f;background:#fff;border-color:#fff;}
.doc_cta .btns a.tel small{display:block;margin-bottom:4px;font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:500;color:#006ce1;}

/* 이전/다음 · 버튼 */
.doc_nav{margin-top:60px;border-top:1px solid #222;}
.doc_nav > *{display:flex;align-items:center;padding:18px 10px;font-size:15px;color:#444;border-bottom:1px solid #ddd;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.doc_nav > * span{flex:none;width:100px;font-weight:500;color:#222;}
.doc_nav > p{color:#999;}
.doc_nav a:hover{color:#0a2b6f;}
.doc_btns{display:flex;justify-content:center;gap:6px;margin-top:40px;}
.doc_btns a{display:inline-block;min-width:90px;height:44px;line-height:42px;padding:0 20px;text-align:center;font-size:15px;color:#444;border:1px solid #ccc;background:#fff;}
.doc_btns a.list{min-width:160px;color:#fff;background:#0a2b6f;border-color:#0a2b6f;}

/* ---------- 우측 영역 ---------- */
.doc_rail{position:relative;}
.rail_sticky{display:flex;flex-direction:column;gap:14px;}
.rail_box{padding:22px 22px 20px;background:#fff;border:1px solid #ddd;}
.rail_box h4{margin:0 0 14px;font-size:16px;font-weight:700;color:#111;}
.rail_toc .toc_progress{height:3px;margin:-4px 0 12px;background:#eee;}
.rail_toc .toc_progress i{display:block;width:0;height:100%;background:#006ce1;transition:width .1s;}
.rail_toc ol li a{position:relative;display:block;padding:7px 0 7px 14px;font-size:15px;line-height:1.45;color:#666;transition:color .2s;}
.rail_toc ol li a:before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;background:#ccc;}
.rail_toc ol li a:hover{color:#0a2b6f;}
.rail_toc ol li a.on{color:#006ce1;font-weight:700;}
.rail_toc ol li a.on:before{background:#006ce1;}
.rail_info dl{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px 6px;margin:0;font-size:14px;line-height:1.55;}
.rail_info dt{font-weight:500;color:#999;}
.rail_info dd{margin:0;color:#333;word-break:keep-all;}
.rail_info dd .auto{display:inline-block;margin-left:4px;padding:0 6px;font-size:11px;line-height:18px;color:#006ce1;border:1px solid #006ce1;vertical-align:1px;}
.rail_cta{padding:22px;color:#fff;background:#0a2b6f;}
.rail_cta .lab{font-size:14px;color:rgba(255,255,255,.75);}
.rail_cta .tel{display:block;margin:4px 0 16px;font-family:'Montserrat',sans-serif;font-size:28px;font-weight:700;color:#fff !important;}
.rail_cta .btns{display:flex;gap:6px;}
.rail_cta .btns a{flex:1;height:40px;line-height:38px;text-align:center;font-size:14px;color:#fff;border:1px solid rgba(255,255,255,.45);transition:background .2s,color .2s;}
.rail_cta .btns a.on,.rail_cta .btns a:hover{color:#0a2b6f;background:#fff;border-color:#fff;}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:1200px){
    .health_inner{width:93.5%;}
    .health_doc{grid-template-columns:minmax(0,1fr);gap:0;}
    .health_doc .doc_rail{display:none;}
    .health_doc .toc_m{display:block;}
    .health_list{gap:40px 20px;}
}
@media (max-width:1000px){
    /* 검색바 : 공통 CSS의 셀렉트(%)·입력창(calc) 너비 기준이 달라 어긋나는 부분을 같은 폭으로 정렬 */
    .health_search .program_search{display:flex;flex-direction:column;gap:10px;max-width:500px;margin:0 auto;}
    .health_search .program_search select{width:100%;margin:0;}
    .health_search .program_search > span{display:flex;margin:0;}
    .health_search .program_search input[type="text"]{flex:1;width:auto;min-width:0;}
    .health_search .program_search button{flex:none;}
    .health_wrap{padding:40px 0 80px;}
    .health_cate ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
    .health_cate li a{height:46px;line-height:46px;font-size:15px;}
    .health_list{grid-template-columns:repeat(2,minmax(0,1fr));}
    .doc_head h1{font-size:34px;}
    .doc_cta{flex-direction:column;align-items:stretch;gap:24px;padding:34px 28px;}
    .doc_cta .btns{width:auto;}
}
@media (max-width:640px){
    .health_cate{margin-bottom:24px;}
    .health_cate ul{grid-template-columns:repeat(3,minmax(0,1fr));}
    .health_cate li a{font-size:14px;}
    .health_total{margin-top:24px;}
    .health_list{grid-template-columns:minmax(0,1fr);gap:36px;}
    .health_card .tit{font-size:19px;}
    .doc_bread{display:none;}
    .doc_head h1{font-size:28px;}
    .doc_head .en{font-size:14px;}
    .doc_head .updated{flex-direction:column;font-size:13px;}
    .doc_summary{margin-top:28px;padding:22px 20px;}
    .doc_summary p:not(.lab){font-size:17px;}
    .doc_sec{padding-top:50px;}
    .doc_sec h2{font-size:22px;}
    .doc_txt p,.doc_editor{font-size:16px;}
    .doc_fig{padding:16px;}
    .doc_check{grid-template-columns:minmax(0,1fr);}
    .doc_check li{font-size:15px;}
    .doc_editor table td{padding:12px !important;font-size:15px;}
    .doc_editor table tr:not(:first-child) td:first-child,
    .doc_editor table thead + tbody tr:first-child td:first-child{width:96px !important;}
    .doc_editor table th{padding:12px !important;font-size:14px;}
    .doc_editor{overflow-x:auto;}
    .doc_faq summary{padding:18px 44px 18px 40px;font-size:16px;}
    .doc_faq summary:before{left:8px;top:17px;}
    .doc_faq summary:after{right:16px;}
    .doc_faq .ans{padding:18px 18px 18px 40px;font-size:15px;}
    .doc_faq .ans:before{left:10px;top:16px;}
    .doc_review{flex-direction:column;align-items:flex-start;padding:20px;}
    .doc_cta{margin-top:50px;padding:28px 20px;}
    .doc_cta h3{font-size:22px;}
    .doc_nav > * span{width:70px;}
}