/* ─────────────────────────────────────────────────────────────
   구 사이트 CSS(default.css) 위에 얹는 최소 보정.
   ⚠️ default.css 는 원본이라 손대지 않는다. 여기에만 쓴다.
   원칙: **화면을 바꾸지 않는 보정만**. 디자인 변경은 이 파일에 넣지 않는다.
   ───────────────────────────────────────────────────────────── */

/* ① 페이지 제목 p → h1 (문서에 h1 이 없던 접근성 결함 교정).
      .subvisial p 와 완전히 같은 모양을 유지한다 — 브라우저 기본 h1 여백·크기를 지운다. */
.subvisial h1, .subvisial p {
  margin: 0;
  text-align: center; line-height: 200px; color: #fff;
  font-size: 38px; letter-spacing: -1px; font-weight: 600;
}
@media (max-width: 960px) {
  .subvisial h1, .subvisial p { line-height: 120px; font-size: 24px; }
}

/* ② 슬라이드 페이지네이션 — 원본은 Swiper 가 <span> 을 만든다.
      우리는 <button> 으로 만든다(키보드 접근). 버튼 기본 스타일만 지운다. */
.swiper-pagination .swiper-pagination-bullet {
  border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}

/* ③ 터치 기기 눌림 피드백 — 원본에 :active 가 없다(CLAUDE.md UI 규칙). 색·크기는 그대로. */
.gnb a:active, .msec01 ul li a:active, .lnb dt a:active,
.toptel a:active, .foot dl dt a:active { opacity: 0.75; }

/* ④ 키보드 포커스 — 원본에 focus 표시가 없어 탭 이동이 보이지 않는다. */
a:focus-visible, button:focus-visible, [role='button']:focus-visible {
  outline: 3px solid #195dae; outline-offset: 2px;
}

/* ⑤ 케이스 목록 고지문 — 의료법 제23조·제56조 표기 */
.case_notice { margin-top: 30px; color: #666; font-size: 14px; line-height: 1.7; }

/* ⑥ 약관·개인정보처리방침 — 구 사이트엔 없던 페이지라 최소 조판만 더한다.
      .substit/.substxt/.subsbar 는 원본 클래스를 그대로 쓰므로 모양이 사이트와 일관된다. */
.doc { max-width: 900px; margin: 0 auto; padding: 60px 20px 100px; text-align: left; }
.doc .substit { text-align: left; color: #333; font-size: 22px; font-weight: 600; }
.doc .subsbar { margin: 12px 0 20px; width: 40px; height: 3px; background: #bc9a6d; }
.doc .substxt { text-align: left; line-height: 1.8; color: #555; margin-bottom: 12px; }
.doc_ul { margin: 0 0 20px; padding-left: 20px; line-height: 1.9; color: #555; }
.doc_ul li { list-style: disc; }
.doc_date { margin-top: 40px; color: #888; font-size: 14px; }
@media (max-width: 960px) {
  .doc { padding: 30px 16px 60px; }
  .doc .substit { font-size: 18px; }
}

/* ⑦ 오시는 길 보강 블록 — 구 사이트엔 버스 정보만 있었다.
      기존 .sub0105_ul 조판을 그대로 쓰되 강조만 더한다. */
.loc_extra .locap03 strong { color: #195dae; font-weight: 700; }
.loc_area { margin: 24px 0 0; color: #555; line-height: 1.8; font-size: 15px; }

/* ⑧ 공지사항 — 구 사이트 게시판 자리. 원본 조판 톤에 맞춘 최소 목록 스타일. */
.notice_empty { padding: 60px 0; text-align: center; color: #666; line-height: 2; }
.notice_list { margin: 40px 0 80px; padding: 0; list-style: none; border-top: 2px solid #333; }
.notice_list li { border-bottom: 1px solid #e5e6e7; }
.notice_list a { display: flex; justify-content: space-between; gap: 20px; padding: 20px 10px; text-decoration: none; color: #333; }
.notice_list a:hover .nt_tit { color: #195dae; }
/* #888 은 흰 배경에서 3.54:1 로 AA 미달 — 날짜는 장식이 아니라 읽는 정보다 (2026-08-20 실측) */
.nt_date { color: #6b6b6b; font-size: 14px; white-space: nowrap; }
#bo_v_title + .nt_date { margin: 8px 0 24px; }

/* ⑨ 지도 서비스 바로가기 — 지도 자체가 업체명·주소·전화·길찾기를 보여주므로
      중복은 빼고 지도에 없는 것(네이버 지도)만 남긴다. */
.place_card { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.place_card a { display: inline-block; padding: 10px 18px; min-height: 44px; line-height: 24px; box-sizing: border-box;
  border: 1px solid #195dae; border-radius: 4px; color: #195dae; text-decoration: none; font-size: 15px; }
.place_card a:hover { background: #195dae; color: #fff; }
.place_card a:focus-visible { outline: 3px solid #195dae; outline-offset: 2px; }
.place_card a:active { opacity: .75; }
@media (max-width: 960px) { .place_card a { flex: 1 1 auto; text-align: center; } }

/* ⑩ 장소 기반 퍼가기 대응 — 원본은 지도만 있는 주소형이라 .msec03_map 높이 360px 로 충분했다.
      장소형은 지도 아래 정보바(주소·전화 84px)가 붙어 총 443px 라 3px 이 푸터를 침범한다(실측).
      .msec04(원본 margin-top:180px)가 만드는 여유를 240px 로 늘려 해결한다.
      msec04 는 흰 여백이라 지도가 그 위로 걸치는 건 원본 의도 그대로다. */
.msec04 { margin-top: 240px; }
@media (max-width: 960px) { .msec04 { margin-top: 0; } }

/* ⑪ 지역·교통 안내 — 푸터 위 밴드. 구 사이트 톤(#f5f5f5 배경·#bc9a6d 바·#195dae 강조)에 맞춘다.
      전 페이지 공통이라 과하지 않게, 정보 밀도만 챙긴다. */
.area_guide { background: #f5f5f5; padding: 70px 0; border-top: 1px solid #e5e6e7; }
.ag_inner { width: 1200px; max-width: calc(100% - 40px); margin: 0 auto; text-align: left; }
.area_guide h2 { margin: 0; font-size: 26px; font-weight: 600; color: #333; letter-spacing: -1px; }
.ag_bar { width: 40px; height: 3px; background: #bc9a6d; margin: 14px 0 24px; }
.ag_lead { margin: 0 0 30px; color: #555; line-height: 1.9; font-size: 16px; }
.ag_lead strong { color: #195dae; font-weight: 600; }
.ag_cols { display: flex; gap: 50px; flex-wrap: wrap; }
.ag_col { flex: 1 1 320px; }
.area_guide h3 { margin: 0 0 14px; font-size: 17px; font-weight: 600; color: #333; }
.ag_col ul { margin: 0; padding: 0; list-style: none; }
.ag_col li { padding: 7px 0; color: #555; line-height: 1.7; font-size: 15px; border-bottom: 1px solid #e9e9e9; }
.ag_col li strong { color: #195dae; font-weight: 600; }
.ag_t { display: inline-block; min-width: 62px; color: #8a6a38; font-weight: 600; }
.ag_note { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid #e0e0e0; color: #666; line-height: 1.9; font-size: 15px; }
.ag_link { display: inline-block; margin: 10px 10px 0 0; padding: 9px 18px; min-height: 44px; line-height: 26px;
  box-sizing: border-box; border: 1px solid #195dae; border-radius: 4px; color: #195dae; text-decoration: none; }
.ag_link:hover { background: #195dae; color: #fff; }
.ag_link:active { opacity: .75; }
.ag_link:focus-visible { outline: 3px solid #195dae; outline-offset: 2px; }
@media (max-width: 960px) {
  .area_guide { padding: 40px 0; }
  .area_guide h2 { font-size: 20px; }
  .ag_cols { gap: 28px; }
  .ag_link { display: block; margin: 10px 0 0; text-align: center; }
}

/* ⑫ 푸터 지역별 안내 — 비앤핏 패턴. 어두운 푸터 위라 밝은 회색 글자.
      ⚠️ 링크 없는 키워드 나열 금지 — 여기 항목은 전부 실재 페이지로 간다. */
.area_links { max-width: 1145px; margin: 40px auto 0; padding: 24px 20px 0; border-top: 1px solid rgba(255,255,255,0.12); text-align: left; }
.al_tit { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #8d949e; }
.al_row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-bottom: 6px; }
.al_city { width: 52px; flex: 0 0 52px; font-size: 13px; font-weight: 700; color: #c8cdd4; }
.al_row a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: #9aa1aa; text-decoration: none; }
.al_row a:hover { color: #fff; }
.al_row a:active { opacity: .75; }
.al_row a:focus-visible { outline: 2px solid #b0deff; outline-offset: 2px; }
@media (max-width: 960px) {
  .area_links { margin-top: 24px; padding: 18px 16px 0; }
  .al_city { width: auto; flex: 0 0 100%; margin-top: 8px; }
}

/* ⑬ 푸터 높이 — 원본 `.foot` 은 데스크톱에서 **height:400px 고정**이다(모바일 분기만 auto).
      지역별 안내를 넣으면 400px 를 넘겨 배경이 끊기고 밝은 띠가 드러난다(2026-08-20 대표 발견).
      min-height 로 바꿔 원래 크기는 유지하면서 넘치는 만큼만 늘어나게 한다. */
.foot { height: auto; min-height: 400px; }

/* ⑭ 닥터칼럼 — 공지 목록 조판을 쓰되 요약 한 줄을 더 보여준다. */
.col_list .nt_tit { display: flex; flex-direction: column; gap: 4px; }
.nt_desc { font-size: 14px; color: #6b6b6b; font-weight: 400; line-height: 1.5; }
.col_body { line-height: 1.9; color: #444; }
.col_body h2 { margin: 40px 0 14px; font-size: 21px; font-weight: 600; color: #333; }
.col_body h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 600; color: #195dae; }
.col_body p { margin: 0 0 16px; }
.col_body ul, .col_body ol { margin: 0 0 20px; padding-left: 22px; }
.col_body li { margin-bottom: 8px; }
.col_body strong { color: #333; font-weight: 600; }
.col_body blockquote { margin: 24px 0; padding: 16px 20px; background: #f7f9fc; border-left: 4px solid #bc9a6d; color: #555; }
/* 의료 고지는 반드시 읽혀야 한다 — #777/#f5f5f5 는 4.11:1 로 AA 미달이었다 (2026-08-20 실측) */
.col_note { margin: 40px 0 0; padding: 16px 20px; background: #f5f5f5; border-radius: 4px; color: #5f5f5f; font-size: 14px; line-height: 1.8; }

/* ⑮ 게시글 상세(공지·칼럼) 조판 — 2026-08-20.
      원본 스킨의 게시판 CSS 를 우리가 가져오지 않아, 제목도 본문도 12px 검정으로
      한 덩어리가 되어 있었다. 원본에 없던 화면이므로 여기서 읽을 수 있게 조판한다. */
#bo_v_title {
  margin: 0; padding: 0 0 4px;
  font-size: 26px; line-height: 1.4; font-weight: 600; color: #222; letter-spacing: -0.5px;
}
#bo_v_title .bo_v_tit { font-size: inherit; font-weight: inherit; color: inherit; }
#bo_v > header { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 32px; }
#bo_v_con { font-size: 15px; line-height: 1.9; color: #444; }
#bo_v_con p { margin: 0 0 16px; }
#bo_v_con img { max-width: 100%; height: auto; }
.bo_v_nb { margin-top: 48px; text-align: center; }

@media (max-width: 960px) {
  #bo_v_title { font-size: 21px; }
  #bo_v_con { font-size: 14px; }
}

/* 고지 문구는 본문보다 작아야 한다 — 14px 이라 본문(12px)보다 커서 위계가 뒤집혀 있었다 */
.col_note { font-size: 13px; }

/* ⑯ 칼럼 본문의 비교표 — 마크다운 표는 브라우저 기본값(패딩 1px·테두리 없음)으로
      나와 읽을 수 없었다(2026-08-20 모바일 실측). 칼럼 절반이 비교표를 쓴다. */
.col_body table {
  width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 14px; line-height: 1.6;
}
.col_body th, .col_body td {
  padding: 10px 12px; border: 1px solid #e2e6ec; text-align: left; vertical-align: top;
}
.col_body th { background: #f7f9fc; font-weight: 600; color: #333; }
.col_body tbody tr:nth-child(even) td { background: #fbfcfd; }
.col_body table + p { margin-top: 20px; }

@media (max-width: 480px) {
  .col_body table { font-size: 13px; }
  .col_body th, .col_body td { padding: 8px 8px; }
}

/* 「목록으로」 — 탭 타깃 44px 미달(35px)이었다. 이 화면의 유일한 이동 수단이다. */
.bo_v_nb a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 120px; padding: 0 24px; box-sizing: border-box;
}

/* ⑰ 모바일 실측 보정 3건 — 2026-08-20 점검.
      원칙 유지: 데스크톱 화면은 바꾸지 않는다. */

/* (a) 케이스 갤러리 — 원본 마크업이 <img width=250> 고정이라 375px 화면에서
      문서 최소폭이 453px 가 되어 **폰이 축소 렌더링**됐다(케이스 목록 4페이지 전부).
      셀보다 커질 수 없게만 막는다. 데스크톱(셀 250px 이상)은 그대로. */
.gall_imgcase img { max-width: 100%; height: auto; }

@media (max-width: 960px) {
  /* (b) 전체메뉴 행 높이 — 데스크톱 line-height(21px)가 터치 오버레이에 그대로 와서
        오누름이 잦다. 고정 오버레이(#lnb) 안에서만 행을 키운다. */
  #lnb dt a, #lnb dd a { display: block; padding: 11px 0; }

  /* (c) 헤더 전화·햄버거 — 24×35/34×34 는 44px 미달. 패딩 + 상쇄 마진으로
        보이는 모양은 그대로 두고 히트 영역만 44px 로. */
  .toptel a { display: inline-block; padding: 10px; margin: -10px; }
  .top_menu .material-icons { padding: 5px; margin: -5px; }
}