/* ==========================================================================
   h8-overlay.css — 이 산출물의 유일한 신규 스타일 파일 (규약 R5 v1)

   원본 CSS(css/reset.css · header.css · footer.css · nivo-slider.css ·
   index.css · sub.css)는 반입 그대로 두고 손대지 않는다. 보강·무력화·보정은
   전부 여기서 캐스케이드로 이긴다. head 조각이 이 파일을 항상 맨 뒤에 건다.

   원본에는 @media 가 단 한 줄도 없다(1200px 고정 레이아웃). 반응형은 전부
   이 파일의 책임이다 — 원본 수치를 그대로 두고 폭만 무르는 방식으로 보강한다.

   breakpoint: 1240 (고정폭 해제) / 1024 (GNB 를 토글로) / 768 / 480
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 접근성 — skip-nav (R23 표준 삽입)
   -------------------------------------------------------------------------- */
#skipNavigation .skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  display: block;
  padding: 10px 20px;
  background: #362e2b;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
}
#skipNavigation .skip-nav:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   2. 문서 기본 — 가로 overflow 차단
   -------------------------------------------------------------------------- */
body { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

/* 렌더링 모드 격차 보정 — 이미지 아래 베이스라인 간격.
   원본 doctype 은 XHTML 1.0 Transitional = limited-quirks(almost standards) 라
   이미지만 있는 라인박스에 strut 디센더가 붙지 않는다. 산출물은 HTML5 doctype
   (full standards) 라 같은 자리에 4~7px 가 생겨 헤더 로고(.logo h1)·푸터
   (.footer/.footer_left/.footer_tele)·본문 컨테이너 높이가 _styles 실측과 어긋난다.
   이 사이트 이미지는 전부 텍스트 없는 단독 라인박스라 vertical-align 로 동일 기하가 난다.
   클래스 규칙(.desc_icon 등 sub.css 의 vertical-align)은 특정도로 이 규칙을 이긴다. */
img { vertical-align: top; }

/* 전체메뉴 드로어의 머리 띠 — js 가 넣는다. 좁은 화면에서 열렸을 때만 쓴다.
   기본값을 안 주면 PC 에서도 nav 안에 한 줄로 그려진다(1025 이상에서 노출됐다). */
.menu_nav_top { display: none; }

/* --------------------------------------------------------------------------
   3. 헤더 GNB 토글 (반응형 내비 — 단일 마크업 예외, R3/R12)
      평시(PC)에는 숨고 1024 이하에서만 나타난다. 원본 PC 모양은 그대로다.
   -------------------------------------------------------------------------- */
.nav_toggle {
  display: none;
  position: absolute;
  top: 50%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav_toggle svg { display: block; width: 30px; height: 30px; margin: 0 auto; }
.nav_toggle line {
  stroke: #111;
  stroke-width: 1.8;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav_toggle[aria-expanded="true"] line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
.nav_toggle[aria-expanded="true"] line:nth-child(2) { opacity: 0; }
.nav_toggle[aria-expanded="true"] line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }

/* --------------------------------------------------------------------------
   4. 서브 상단 탭(content_nav) 현재 위치 표시
      원본은 인라인 스크립트가 background-color 를 직접 찍었다
      ($(".content_nav ul li:eq(N) a").css(...)). 그 결과를 클래스로 옮긴다 —
      색은 원본 수치 그대로(#362E2B), 페이지가 자기 li 에 class="on" 을 단다.
   -------------------------------------------------------------------------- */
.content_nav ul li.on > a { background-color: #362E2B; }

/* --------------------------------------------------------------------------
   5. 메인 비주얼 슬라이더 — 원본 index 인라인 style 블록 이관
      원본: <style>@media all and (max-width:1280px){.nivoSlider img{margin-left:-300px;}}</style>
      R5 가 인라인 style 블록을 금지하므로 수치 그대로 여기로 옮긴다.
   -------------------------------------------------------------------------- */
@media all and (max-width: 1280px) {
  .nivoSlider img { margin-left: -300px; }
}

/* --------------------------------------------------------------------------
   6. 반응형 — 1240 이하: 1200px 고정폭 해제
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1240px) {
  .logo,
  .nav > ul,
  .sub_nav,
  .nivo-controlNav,
  .footer_area { width: 100%; box-sizing: border-box; }
  .logo { padding: 0 15px; }
  .nivo-controlNav { left: 0; margin-left: 0; }
  .footer_area { padding: 0 15px; }
  .footer_area > div { padding-right: 40px; }
}

/* --------------------------------------------------------------------------
   7. 반응형 — 1024 이하: GNB 를 토글 메뉴로, 히어로 고정폭 해제
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .nav_toggle { display: block; }

  .logo { height: auto; padding: 10px 15px 10px 65px; }
  .logo h1 { width: 240px; margin: 6px auto; }
  .top_tele { position: static; display: block; margin: 6px 0 4px; text-align: center; }
  .top_tele img { max-width: 240px; }

  /* 전체메뉴 — 원본 /mb 의 2단 구성(왼쪽 대메뉴 · 오른쪽 하위)을 그대로.
     수치·색은 원본 mb/css/common/header.css 실측값이다. */
  .nav { height: auto; }
  .nav > ul,
  .nav > .menu_nav_top { display: none; }
  /* 원본은 헤더를 덮지 않는다 — 메뉴·로고·전화가 그대로 보이고 그 아래에서 열린다. */
  .nav.is-open {
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    overflow-y: auto;                 /* 화면보다 메뉴가 길면 끝까지 볼 수 있어야 한다 */
    -webkit-overflow-scrolling: touch;
    background: #42362f;
  }
  body.nav-open .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: #fff;
  }
  body.nav-open { overflow: hidden; }
  .nav.is-open > .menu_nav_top { display: block; }
  .nav.is-open > ul { display: block; }

  .menu_nav_top {
    background-color: #2a2a2a;
    padding: 10px;
    color: #fff;
    overflow: hidden;
  }
  .menu_nav_top p { height: 20px; margin: 0; font-size: 16px; font-weight: bold; line-height: 20px; }
  .menu_nav_top p:first-child { float: left; }

  .nav.is-open .main_nav {
    position: relative;
    width: 50%;
    height: auto;
    min-height: calc(100% - 40px);
    margin: 0;              /* PC 는 가운데 정렬 여백(97.5px)을 갖는다 — 드로어에서는 없앤다 */
    padding: 0;
    background-color: #42362f;
    color: #fff;
  }
  .main_nav > li {
    position: static;
    display: block;
    height: auto;
    line-height: normal;
    margin-left: 0;
    border-bottom: 1px solid #ccc;
  }
  .main_nav > li:last-child { border-bottom: none; }
  .main_nav > li > a {
    display: block;
    position: relative;
    padding: 15px 0;
    text-indent: 10px;
    text-align: left;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
  }
  .main_nav > li > a hr { display: none !important; }
  .main_nav > li.is-on > a { background-color: #f7e0cf; color: #42362f; }
  .main_nav > li.is-on > a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 15px;
    height: 17px;
    margin-top: -8.5px;
    background: url("/uploads/mig_site/img/m_select_triangle.png") no-repeat;
  }

  /* 하위 메뉴는 오른쪽 절반에 — .main_nav 기준으로 자리를 잡는다. */
  .main_nav > li > div {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #62544c;
    overflow-y: auto;
  }
  .main_nav > li:hover > div { display: none; }
  .main_nav > li.is-on > div { display: block; }
  .main_nav > li > div > p { display: none; }
  /* 하위 행이 대메뉴보다 6px 높아 좌우 격자가 어긋났다(대 44 / 하위 50) — 같은 줄높이로 맞춘다. */
  .sub_nav { height: auto; line-height: 1; padding: 0; }
  .sub_nav li { display: block; height: auto; padding: 0; margin-left: 0 !important; }
  /* 왼쪽 대메뉴는 행마다 1px 구분선이 있어 45px 간격이다 — 오른쪽도 같은 간격으로 둔다
     (선은 그리지 않는다. 원본 오른쪽 열에는 선이 없다). */
  .sub_nav li + li { margin-top: 1px; }
  .sub_nav li a {
    display: block;
    padding: 15px 0;
    text-indent: 10px;
    text-align: left;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
  }

  /* 히어로 — 1903px 최소폭 해제(원본은 PC 전용 수치) */
  .nivoSlider { min-width: 0; }
  .nivoSlider img { width: 100% !important; height: auto; margin-left: 0; position: relative; }
  .nivo-controlNav { position: static; height: auto; }
  .nivo-controlNav a { height: 56px; }
  .visual > p { display: none; }

  /* 푸터 — 3단 → 세로 */
  .footer_area > div { float: none; width: 100%; padding-right: 0; }
  .footer_left { padding-top: 0; }
  .footer_center { margin-top: 18px; }
  .footer_right { padding-top: 18px; }
  .footer_nav { padding-bottom: 18px; }
  /* 로고·대표전화 이미지는 PC 크기 그대로라 좁은 화면에서 본문보다 커진다 — 2/3 로 줄인다. */
  .footer_left img { width: 107px; height: auto; }
  .footer_tele img { width: 240px; height: auto; }
}

/* --------------------------------------------------------------------------
   8. 반응형 — 768 이하
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .logo h1 { width: 200px; }
  .top_tele img { max-width: 200px; }
  .nivo-controlNav a { width: 50%; height: 50px; }
  .nivo-controlNav a:nth-child(odd) { border-left: none; }
  .nivo-controlNav a img { height: 55%; margin-top: 11px; }
  .footer { padding: 24px 0; }
  .footer_area { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   9. 반응형 — 480 이하
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .logo { padding: 8px 12px 8px 58px; }
  .logo h1 { width: 170px; }
  .top_tele img { max-width: 170px; }
  .footer_area { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   10. 접근성 — 모션 선호 존중
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nivo-main-image { transition: none !important; }
}

/* --------------------------------------------------------------------------
   12. 본문 컨테이너 반응형
       .content{width:1200px} 는 index.css 와 sub.css 양쪽에 있는 공통 레이아웃이다.
       원본에 @media 가 없어 좁은 화면에서 그대로 가로 스크롤이 난다(실측 m 810px).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1240px) {
  .content { width: 100%; box-sizing: border-box; padding: 0 15px; }
}

/* 홈 본문 블록 — 원본 모자이크 배치를 **비율 그대로** 유지한다(ShotGate r2).
   종전 규칙은 1024 이하에서 3단을 1열로, 640 이하에서 타일을 1열로 접었다. 그 결과
   문서가 원본 대비 t 1.70배(3004→5119) · m 3.78배(1413→5340)로 부풀어 섹션 순서가
   정답샷과 전혀 다른 자리에 놓였다(parity m 0.265). 원본 index.css 는 1200px 기준
   고정 픽셀로 짜인 타일 모자이크다 — 그 픽셀 폭을 1200 분율로 환산해 백분율로만
   바꾸면 열 구성·인접 관계·종횡비가 전부 보존된 채 폭만 따라 줄어든다(접지 않는다).
   수치 근거는 전부 원본 실측 rect(눈대중 없음):
     content1  left/right 383 · center 384 · 좌우 여백 25 · 상하 간격 15 (합 1200)
     비뇨기과 1행 375·320·505  2행 375·320·255·249
     피부과   1행 695·505      2행 375·320·505           (a 폭 = img + padding-right 9)
   ⚠ .content1/.content2/.content_link 는 index 전용 클래스다(다른 페이지 영향 없음).
   .content 자체의 유동화는 위 1240 블록(전 페이지 공통)이 담당한다. */
@media screen and (max-width: 1240px) {
  /* content1 — 3단 유지(383|384|383 + 25 여백), 높이는 이미지 종횡비가 결정 */
  .content1 > div { height: auto; }
  .content1_left_img,
  .content1_right_img { width: 31.9167%; }            /* 383/1200 */
  .content1_center_img { width: 32%; height: auto !important; margin: 0 2.0833%; }  /* 384/1200, 25/1200 */
  .content1 > div > div { width: 100%; height: auto; }
  .content1 > div > div a { height: auto; }
  .content1 > div > div a img { width: 100%; height: auto; }
  .content1_center_img a { display: block; height: auto; }
  .content1_center_img img { width: 100%; height: auto; }
  .content1_top_img { margin-bottom: 3.9164%; }       /* 15/383 — 좌우 열 높이를 중앙과 맞춘다 */

  /* content2 — 1200×330 배너 */
  .content2 { height: auto; }
  .content2 img { height: auto; }

  /* content3·content4 — 행별 타일 폭을 1200 분율로.
     a 는 padding-right(9) 를 폭 안에 넣어야 원본과 같은 자리에 떨어진다.
     각 행 마지막 타일만 0.03%p 덜 줘 서브픽셀 반올림에 의한 줄바꿈을 막는다. */
  .content_link > div > a { box-sizing: border-box; width: 31.25%; }      /* 375/1200 */
  .content_link > div > a:nth-child(2) { width: 26.6667%; }               /* 320/1200 */
  .content_link > div > a:nth-child(3) { width: 42.05%; }                 /* 505/1200 */
  .content_link > div > a img { width: 100%; height: auto; }
  /* 비뇨기과(3번째 블록) 2행 = 4타일 */
  .content_link:nth-of-type(3) > div:nth-of-type(2) > a:nth-child(3) { width: 21.25%; }   /* 255/1200 */
  .content_link:nth-of-type(3) > div:nth-of-type(2) > a:nth-child(4) { width: 20.72%; }   /* 249/1200 */
  /* 피부과(4번째 블록) 1행 = 2타일 */
  .content_link:nth-of-type(4) > div:nth-of-type(1) > a:nth-child(1) { width: 57.9167%; } /* 695/1200 */
  .content_link:nth-of-type(4) > div:nth-of-type(1) > a:nth-child(2) { width: 42.05%; }   /* 505/1200 */
}

@media screen and (max-width: 1024px) {
  .content > div { margin-top: 40px; }
  .content > div:last-child { margin-bottom: 40px; }

  .content_link h3 { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   13. 편집친화(R1) — 여백용 <br> 연발을 CSS 로 (EditGate 2026-09-21)
       원본은 블록 사이 간격을 <br><br> 로 만들었다. 에디터가 텍스트를 통째
       교체할 때 깨지는 마크업 습관이라 br 을 걷고 같은 크기의 margin 으로 옮긴다.
       수치는 추정이 아니라 실측이다 — .detail_content 본문 행 1줄 = 16px
       (br 2개 삭제 시 문서 높이 -32px · 3개 -48px, d1440/m390 동일 실측).
       margin 으로 두는 이유: h3/h4 의 배경 dot 이 퍼센트 위치라 padding 을 주면
       장식 위치가 밀린다. 인접 형제 margin 은 전부 0(reset) 이라 상쇄 없음. */
.line_gap2 { margin-top: 32px; }
.line_gap3 { margin-top: 48px; }
/* 문단 안 <br><br>(= 빈 줄 1개)을 문단 분리로 바꾼 자리 — 본문 p 는 line-height 28px */
.detail_content > p.para_gap { margin-bottom: 28px; }

/* 페이징은 위 img{vertical-align:top} 의 전제("텍스트 없는 단독 라인박스")가 깨지는 자리다 —
   버튼 이미지와 페이지 숫자가 한 라인박스에 섞여 있어, 전역 top 정렬이 숫자를 위로 밀어낸다.
   원본에는 이 전역 규칙이 없으므로 여기서만 원본과 같은 baseline 정렬로 되돌린다. */
.pagenation img { vertical-align: baseline; }

/* ==========================================================================
   모바일 재구성 (검수 2026-09-22 — M-01·M-03·M-04·M-06·READ-01)
   콘텐츠는 PC 것을 그대로 두고, 좁은 화면의 배치·조작만 모바일 원본을 참고한다.
   ========================================================================== */

/* M-01 헤더 — 메뉴·로고·전화를 한 줄에 둔다(모바일 원본 구성).
   PC 의 넓은 상담번호 이미지는 좁은 화면에서 두 번째 행을 만들어 헤더가 115px 이 됐다. */
.top_tele .m_counsel { display: none; }

@media screen and (max-width: 1024px) {
  .header .logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 58px;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .header .logo h1 { flex: 1 1 auto; margin: 0; text-align: center; }
  .header .logo h1 img { height: 30px; width: auto; }
  .header .logo .nav_toggle { position: static; flex: 0 0 auto; margin: 0; }
  .top_tele { flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: 0; text-align: right; }
  .top_tele > img { display: none; }            /* 넓은 상담번호 이미지 — 좁은 폭에서 숨긴다 */
  .top_tele .m_counsel { display: inline-block; line-height: 0; }
}

/* READ-01 본문 행간 — 원본이 line-height:normal 이라 좁은 폭에서 줄이 붙어 읽기 어렵다.
   문구는 그대로 두고 행간·문단 간격만 보탠다. */
@media screen and (max-width: 768px) {
  .detail_content p { line-height: 1.7; }
  .detail_content p + p { margin-top: 10px; }
}

/* M-06 하위 화면 상단 여백 — 제목·경로·배너를 지나 본문이 화면 아래에서 시작했다. */
@media screen and (max-width: 1024px) {
  .top_content { padding-top: 14px; padding-bottom: 10px; }
  .top_content h2 { margin-bottom: 6px; }
  .quickroute { margin-bottom: 8px; }
  .content_area .content_nav { margin-bottom: 10px; }
}

/* M-02 히어로 — 모바일 원본 이미지(640x352)를 쓰고, 컨트롤은 원본 /mb 의 bxSlider
   컨트롤 바(배경 #E6E3DC · 높이 50px · 좌우 화살표 + 도트)와 같은 모양으로 둔다.
   HTML 은 한 벌이고 이 바는 js/main.js 가 붙인다. */
.m_hero_ctrl { display: none; }
.m_hero_track { display: none; }

@media screen and (max-width: 1024px) {
  /* PC 용 4칸 선택 카드는 좁은 화면에서 두 줄을 먹는다 — 도트로 대신한다. */
  .nivo-controlNav { display: none; }

  /* 모바일 전환은 원본 /mb 의 bxSlider 처럼 가로로 민다 — 손가락을 따라 움직인다. */
  .slider.m_hero .m_hero_track { display: flex; width: 100%; touch-action: pan-y; }
  .slider.m_hero .m_hero_track img {
    flex: 0 0 100%;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin: 0 !important;
    display: block;
  }
  .slider.m_hero .nivo-main-image { display: none !important; }

  .m_hero_ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 6px;
    background: #e6e3dc;
  }
  .m_hero_arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #8c8378;
    cursor: pointer;
    line-height: 0;
  }
  .m_hero_arrow svg { width: 22px; height: 22px; }
  .m_hero_arrow:active { color: #5f574e; }
  .m_hero_dots { display: flex; align-items: center; gap: 9px; }
  .m_hero_dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c4bfb5;
    cursor: pointer;
  }
  .m_hero_dots button[aria-selected="true"] { background: #3a3330; }
}

/* M-05 이미지 속 본문 확대 보기 */
.zoomable { cursor: zoom-in; }

@media screen and (max-width: 1024px) {
  .zoomable { outline: 1px solid rgba(54, 46, 43, 0.18); outline-offset: -1px; }
}

.img_zoom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.82);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.img_zoom_close {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  margin: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 2px;
  background: #fff;
  color: #362e2b;
  font-size: 14px;
  cursor: pointer;
}
.img_zoom_body { padding: 0 8px 24px; }
.img_zoom_body img { display: block; max-width: none; height: auto; }

/* ==========================================================================
   모바일 홈 — 원본 /mb 구성 반영 (검수 2차 피드백)
   진료과목 8칸 · 카드 4장(2열) · 배너 · 하단 슬라이드. PC 에서는 숨긴다.
   ========================================================================== */
.m_home { display: none; }

@media screen and (max-width: 1024px) {
  /* 로고를 원본 모바일만큼 키운다(헤더 65px 안에서 크게 보이던 비율). */
  .header .logo { height: 66px; }
  .header .logo h1 img { height: 46px; }

  .m_home { display: block; }

  /* 진료과목 8칸 — 4열 2행. 칸 높이는 너비의 2/3(원본은 이 값을 스크립트로 넣었다),
     아이콘 높이는 칸 높이의 40%, 글자는 칸 높이 65% 지점에 고정 — 아이콘 모양이
     달라도 글자 줄이 여덟 칸 모두 같은 높이에 온다. */
  .m_index_menu ul { overflow: hidden; margin: 0; padding: 0; list-style: none; }
  .m_index_menu li { float: left; width: 25%; aspect-ratio: 3 / 2; position: relative; margin: 0;
                     box-sizing: border-box; background: #635449; border: 1px solid #504537; text-align: center; }
  .m_index_menu a { display: block; width: 100%; height: 100%; color: #fff; font-weight: bold; text-decoration: none; }
  .m_index_menu img { width: auto; height: 40%; margin-top: 10%; }
  .m_index_menu p { position: absolute; left: 0; top: 65%; width: 100%; margin: 0;
                    font-size: 13px; line-height: 1.2; word-break: keep-all; }

  /* 카드 4장 — 2열(의료진·상담 / 둘러보기·오시는길) */
  .m_main_content1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 0; padding: 0 20px; }
  .m_main_content1 a { display: block; }
  .m_main_content1 img { width: 100%; height: auto; }

  .m_main_content2 { margin-top: 12px; }
  .m_main_content2 img { width: 100%; height: auto; display: block; }

  /* 하단 슬라이드 — 6장 가로 이동 + 도트 */
  .m_sub_slide { position: relative; margin-top: 0; overflow: hidden; }
  .m_slide_track { display: flex; transition: transform 400ms ease; }
  .m_slide_track > div { flex: 0 0 100%; }
  .m_slide_track img { width: 100%; height: auto; display: block; }
  .m_slide_dots { position: absolute; right: 20px; bottom: 7px; display: flex; align-items: center; gap: 14px; }
  .m_slide_dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 30px; background: #d6d6d6; cursor: pointer; }
  .m_slide_dots button[aria-selected="true"] { width: 25px; background: #313131; }

  /* PC 상단 유틸리티·하단 배너·클리닉 카드는 모바일 구성과 역할이 겹친다.
     진료과목은 8칸 메뉴가, 안내 배너는 하단 슬라이드가, 카드 4장은 m_main_content1 이
     대신한다. 진료시간·대표전화는 푸터에 글자로 남아 있어 정보가 사라지지 않는다. */
  .content1,
  .content2,
  .content_link { display: none; }
}

@media screen and (max-width: 420px) {
  .m_index_menu p { font-size: 11px; }
}

/* 헤더 우측 온라인상담 — 왼쪽 전체메뉴와 같은 선 굵기·같은 30px 상자로 둔다. */
@media screen and (max-width: 1024px) {
  .top_tele .m_counsel { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #111; }
  .top_tele .m_counsel svg { display: block; width: 30px; height: 30px; }
}

/* ==========================================================================
   서브 상단·본문 — 좁은 화면은 원본 /mb 구성을 따른다.
     상단  경로 바(#635449) + 형제 페이지 드롭다운 + 모바일 타이틀 이미지(가로 꽉)
     본문  PC 의 테두리 상자를 걷고 좌우 20px 기준선에 맞춘다
   PC 배너(1200x195)는 좁은 폭에서 글자가 6px 로 줄어 읽히지 않는다 — 같은 디자인의
   원본 모바일 이미지(640x220)를 <picture> 로 바꿔 건다. HTML 은 한 벌이다.
   ========================================================================== */
/* 경로 바의 마지막 칸은 좁은 화면에서만 형제 페이지를 펴는 단추다. 넓은 화면에는 펼 목록이
   없으므로 원본처럼 그냥 글자로 둔다 — 눌러도 아무 일이 없는 것은 JS 가 막고, 여기서는
   글자처럼 보이고 골라지게만 한다(초점은 JS 가 tabindex 로 뺀다). */
.sub_page_nav {
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  vertical-align: baseline; cursor: text;
  -webkit-user-select: text; user-select: text;
}
.sub_page_nav span { display: none; }

@media screen and (max-width: 1024px) {
  .content { padding: 0; }
  .content > .top_content,
  .content > .content_area { margin-top: 0; }

  .content > .top_content { padding: 0; }
  .top_content h2 { display: none; }
  .top_content .quickroute {
    position: static;
    float: none;              /* 페이지별 CSS 가 좁은 폭에서 오른쪽으로 띄워 둔 것을 되돌린다 */
    clear: none;
    display: block;
    margin: 0;
    padding: 15px 10px;
    background: #635449 none;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
  }
  .top_content .quickroute .sub_page_nav { color: #fff; cursor: pointer; -webkit-user-select: none; user-select: none; }
  .top_content .quickroute .sub_page_nav span { display: inline; margin-left: 4px; }

  /* 원본 sub.css 의 overflow:hidden 은 PC 탭 바 기준이다 — 펼친 목록이 잘린다. */
  .content_area .content_nav { position: relative; margin: 0; padding: 0; overflow: visible; }
  .content_area .content_nav hr { display: none; }
  .content_area .content_nav_img img { display: block; width: 100%; margin: 0; border-bottom: 3px solid #39220c; }
  .content_area .content_nav ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    background: #fff;
  }
  .content_area .content_nav ul.is-open { display: block; overflow: hidden; }
  .content_area .content_nav ul li {
    float: left;
    width: 50%;
    height: auto;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;
    border-right: 1px solid #635449;
    border-bottom: 1px solid #635449;
    background-color: #fff;
  }
  .content_area .content_nav ul li:nth-child(2n) { border-right: 0; }
  .content_area .content_nav ul li a { padding: 15px 10px; color: #404040; font-size: 16px; }
  /* 원본은 펼친 목록에서 현재 페이지를 따로 칠하지 않는다 — PC 탭의 짙은 칠도 여기선 걷는다. */
  .content_area .content_nav ul li.on > a { background-color: transparent; color: #404040; }

  .content_area .detail_content { margin-bottom: 0; border: 0; background: none; }
  .detail_content img { max-width: 100%; height: auto; }
  .zoomable { outline: 0; }
}

/* 본문 이미지의 모바일본 — <picture> 로 감싸면 img 가 저마다 :last-child 가 되어
   .list_content_img img:last-child{margin:0} 이 전부에 걸린다. 간격을 래퍼 기준으로 다시 잡는다. */
.list_content_img picture:not(:last-child) img { margin-bottom: 10px; }
.list_content_img picture:last-child img { margin-bottom: 0; }

/* ==========================================================================
   어드민 팝업 — 원본에 팝업 화면이 없어도 연동해 둔다(빈 슬롯 연동).
   등록이 없으면 js 가 DOM 을 만들지 않으므로 이 규칙은 아무 데도 걸리지 않는다.
   ========================================================================== */
/* 어드민은 팝업 CSS 를 내려주지 않는다 — 모양은 프론트가 전부 들고 있어야 한다(2026-09-29 확인).
   빌더 기본 팝업(ahb-popup)의 실측 규격에 맞춘다: 막 위 가운데, 상자 400px,
   버튼 줄은 상자 밖 막 위에 둔다. */
.mig_popup_layer {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.mig_popup {
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: 86vh;
  overflow: auto;
}
.mig_popup_panel {
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.mig_popup img { display: block; width: 100%; height: auto; }
.mig_popup_body { }
.mig_popup_body.rte-content { padding: 16px; }
/* 버튼 줄 — 상자 안, 폭을 꽉 채운 44px 막대(실측: 바탕 #333, '오늘 하루'는 왼쪽 끝,
   '닫기'는 오른쪽 끝에 #555 로 얹힌다). */
.mig_popup_foot {
  display: flex; align-items: stretch; justify-content: space-between;
  height: 44px; background: #333;
}
.mig_popup_foot button {
  height: 44px; padding: 0 16px; border: 0;
  font-size: 14px; font-weight: 400; color: #fff; cursor: pointer;
}
.mig_popup_today { background: transparent; }
.mig_popup_close { background: #555; margin-left: auto; }

/* 위치 — 기본은 가운데. 어드민이 위/아래/꽉참을 지정하면 그에 맞춘다. */
.mig_popup_layer.at_top { align-items: flex-start; padding-top: 16px; }
.mig_popup_layer.at_bottom { align-items: flex-end; padding-bottom: 16px; }
.mig_popup_full { width: 100%; max-width: none; height: 100%; }

/* 상담 관리자 답변 — 원본 sub.css 의 .admin_answer 서식을 그대로 쓴다(검수 C01). */
.admin_answer { margin-top: 30px; }
.admin_answer_item + .admin_answer_item { margin-top: 20px; }
/* 원본 .admin_answer 에는 작성자·날짜 줄이 없었다 — 우리가 더한 줄이라 원본 서식대로 두면
   제목 아래 점선에 글자가 딱 붙는다. 줄 하나 띄운다. */
.admin_answer_meta { margin-top: 12px; color: #777; font-size: 13px; }
.admin_answer_meta .answer_at { margin-left: 8px; }

/* 비밀글 확인 — 한 줄(라벨·입력·확인), 가운데.
   페이지 CSS 가 .pw_label 을 block 으로, sub.css 가 input 높이를 30px 로 잡아 두어
   좁은 폭에서 세 조각이 따로 떨어지고 높이도 어긋났다. 여기서 한 벌로 확정한다. */
.password_confirm_area { padding: 40px 0; text-align: center; }
.password_confirm_area .pw_guide {
  margin: 0 0 18px;
  padding: 0;
  color: #404040;
  font-size: 14px;
  line-height: 1.7;
}
.password_confirm_area .pw_row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.password_confirm_area .pw_row .pw_label {
  display: inline-block;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}
.password_confirm_area .pw_row input[type="password"] {
  width: 200px;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  line-height: normal;
  vertical-align: middle;
}
.password_confirm_area .pw_row .pw_submit {
  height: 38px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #5a504b;
  background-color: #fff;
  color: #362e2b;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.password_confirm_area .pw_row .pw_submit:hover { background-color: #f4f1ee; }
.password_confirm_area .pw_error { margin: 12px 0 0; padding: 0; color: #d0021b; font-size: 14px; }

@media screen and (max-width: 480px) {
  .password_confirm_area { padding: 28px 0; }
  .password_confirm_area .pw_row input[type="password"] { width: 100%; max-width: 150px; }
  .password_confirm_area .pw_row .pw_submit { padding: 0 14px; }
}

/* 공지 본문의 표 테두리 — 원본 글이 옛 에디터에서 table border=1 로 감싸여 있다.
   내용이 아니라 편집기 잔재라 지운다(담당자 확인 2026-09-23). 인라인 style 을 이겨야 한다. */
.board_content_desc table.apse,
.board_content_desc table.__se_tbl_ext { border: 0 !important; }
.board_content_desc table.apse td,
.board_content_desc table.__se_tbl_ext td { border: 0 !important; padding-left: 0 !important; }

/* 히어로가 아주 넓은 화면에서 왼쪽으로 붙는다 — 원본이 .nivoSlider 에 min-width:1903px 를 걸어
   이미지 높이를 고정했기 때문이다(원본도 같은 증상). 본문(.content 1200)은 가운데인데 히어로만
   왼쪽이라 축이 어긋난다. 히어로 묶음을 같은 축으로 가운데 둔다. */
.visual { max-width: 1900px; margin: 0 auto; }

/* 게시판 목록 — 검수 지적 2건 */
/* ⒜ [비밀글] 마커와 제목 — 마커가 제목보다 위로 뜨고(굵기 차이로 기준선 어긋남),
   좁은 폭에서는 둘이 각각 덩어리라 한 줄에 못 들어가면 제목이 아래로 떨어진다.
   **td 는 건드리지 않는다** — td 를 flex 로 바꾸면 표가 주던 세로 가운데 정렬이 풀려
   제목만 행 위쪽에 붙는다(실측). 안쪽에 한 줄짜리 묶음을 두고 그것만 flex 로 만든다. */
.board_list .desc .desc_line { display: flex; align-items: center; gap: 5px; line-height: 1.6; min-width: 0; }
.board_list .desc .secret_mark { flex: 0 0 auto; margin-right: 0; }
.board_list .desc .desc_text { flex: 1 1 auto; min-width: 0; max-width: none; }
/* ⒝ 글쓰기는 링크가 아니라 버튼으로 — 목록 버튼(.list_btn_group a)과 같은 모양. */
.notice_write a {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #362e2b;
  background-color: #362e2b;
  color: #fff;
  font-weight: bold;
}


/* --------------------------------------------------------------------------
   draft 재검수 반영 (2026-09-23)
   -------------------------------------------------------------------------- */

/* 본문 줄높이는 `.detail_content > p` 에만 걸려 있어, 단을 나눈 블록 안으로 들어간 문단은
   그 규칙 밖이라 줄이 붙는다. 44페이지 실측 결과 해당하는 본문 블록은 이 한 곳뿐이다. */
.detail_content6_1_left p { line-height: 28px; text-align: justify; }

/* 안내 카드의 설명은 이미지에 그려져 있어 칸이 좁아지면 글씨도 같이 줄어든다.
   아주 좁은 화면에서는 두 칸을 한 칸으로 펴서 읽을 수 있는 크기를 준다. */
@media screen and (max-width: 360px) {
  .m_main_content1 { grid-template-columns: 1fr; }
}

/* 게시글 본문 상자 — 내부 스크롤과 과한 여백
   원본 sub.css 는 본문 상자를 `max-height:500px; overflow:auto` 로 묶어 두었다. 원본은 글이
   몇 개뿐이라 드러나지 않았지만, 글을 게시판에서 받아 오면 500px 를 넘는 글마다 상자 안쪽에
   스크롤이 생겨 화면 스크롤과 따로 논다 — 아래쪽 내용이 있는지도 보이지 않는다.
   높이 제한을 풀어 글 길이대로 펴고, 위아래 여백(40/100+40)도 읽기에 맞게 줄인다. */
.board_content { min-height: 0; max-height: none; overflow: visible; padding-bottom: 20px; }
.board_content_desc { padding: 20px 0 20px; }

/* --------------------------------------------------------------------------
   서브 본문 여백 — 부모 한 곳에서만 준다
   화면마다 첫 덩어리가 제각각 여백을 들고 있어(제목 padding 20 · 게시판 padding 50 ·
   본원소개의 빈 줄 33) 같은 자리인데 PC 31/64/146px, 모바일 0/28/33px 로 벌어져 있었다.
   자식들이 들고 있던 위쪽 여백을 걷고, 여백은 아래 두 줄로만 준다.
   -------------------------------------------------------------------------- */
.content_area .detail_content { padding: 30px 30px 60px; }

@media screen and (max-width: 1024px) {
  .content_area .detail_content { padding: 20px 20px 40px; }
}

/* 첫 덩어리가 제 위쪽 여백을 더하면 페이지마다 값이 달라진다 — 걷는다(두 겹까지). */
.content_area .detail_content > *:first-child,
.content_area .detail_content > *:first-child > *:first-child { margin-top: 0; padding-top: 0; }

/* 제목 앞 아이콘은 원래 padding 20px 을 전제로 자리를 잡고 있었다 — padding 을 걷었으니
   글자에 맞춰 다시 내린다. 글자 크기가 화면마다 달라 값도 두 개다. */
.content_area .detail_content > h3:first-child { background-position-y: 4px; }

@media screen and (max-width: 1024px) {
  .content_area .detail_content > h3:first-child { background-position-y: 1px; }
}

/* 본원소개가 원본의 빈 줄을 대신하려고 둔 스페이서도 이 여백에 흡수한다. */
.content_area .detail_content::before { display: none; }

/* 숨겨 둔 버튼이 그대로 보이던 것
   sub.css 의 `.list_btn_group a{display:inline-block}` 이 브라우저 기본 `[hidden]{display:none}`
   을 눌러, 인증 전에 감춰 둔 [수정]·[삭제] 가 그대로 떴다(페이저에서 겪은 것과 같은 자리). */
.list_btn_group [hidden] { display: none !important; }

/* 버튼 모양 링크에 hover 밑줄이 그이던 것
   원본 reset 은 `a:link, a:visited` 만 밑줄을 걷어서, hover 에서는 브라우저 기본 밑줄이
   되살아난다. 글자 링크는 원본 그대로 두고, 버튼처럼 칠한 링크만 밑줄을 막는다. */
.notice_write a:hover,
.list_btn_group a:hover { text-decoration: none; }

/* 목록에서 답변이 달렸는지 — 제목 바로 뒤에 붙인다.
   병원이 답을 했는지 목록에서 알 수 없어 글을 하나씩 열어봐야 했다.
   제목이 남은 자리를 다 먹으면 표시가 오른쪽 끝으로 밀려 제목과 떨어져 보인다 —
   제목은 제 길이만 차지하게 두고 표시가 바로 뒤에 붙게 한다. */
.board_list .desc .desc_text { flex: 0 1 auto; }
.board_list .desc .answer_mark {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #2f7d32;
  color: #2f7d32;
  font-size: 12px;
  line-height: 1.5;
}