/*
 * 금곡효요양병원 복원 사이트 — 보완 스타일
 * 원본 pc.css / common.css 는 수정하지 않고, 복원 과정에서 필요한 부분만 이 파일에서 덧씌운다.
 */

/* 키 없는 퍼가기 지도 — 원본 지도 영역 크기 그대로 채움 */
.restore_map_embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* 지도 표시를 끈 경우(embedMap: 'none')의 지도 자리 표시 (원본 지도 영역 크기·위치 유지) */
.restore_map_fallback {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #eef1f4 repeating-linear-gradient(45deg, #eef1f4 0, #eef1f4 14px, #e7ebef 14px, #e7ebef 28px);
  color: #666;
  text-align: center;
  text-decoration: none;
}
.restore_map_fallback .restore_map_pin {
  display: block;
  padding-top: 18%;
  font-size: 40px;
  color: #474b53;
}
.restore_map_fallback .restore_map_text {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.5px;
}
.restore_map_fallback .restore_map_text em {
  font-style: normal;
  font-size: 13px;
  color: #999;
}

/* 메인 요약 슬라이드 이미지: 원본 .main .slide_box img 규칙(높이 355px)을 따르되 비율 왜곡 방지 */
.main .slide_box img { -o-object-fit: cover; object-fit: cover; }
/* idangerous Swiper 2.x 필수 스타일 (원본은 요약 HTML과 함께 서버에서 오던 부분) */
.main .slide_box { position: relative; }
.main .slide_box .swiper-container { position: relative; overflow: hidden; }
.main .slide_box .swiper-wrapper { position: relative; }
.main .slide_box .swiper-pagination-switch { cursor: pointer; }

/* =====================================================================
 * 모바일·태블릿 보완 (백업에 모바일 전용 화면 자료가 없어 새로 작성한 부분)
 * - 1280px 이상: 원본 PC 화면 그대로 (아래 규칙 적용 안 됨)
 * - 1279px 이하: 원본 고정폭(1280/1100px)을 화면 폭에 맞게 풀어 줌
 * - 1023px 이하: 상단 가로 메뉴 대신 '전체보기' 메뉴 사용
 * ===================================================================== */
@media all and (max-width: 1279px) {
  .wrap, .is_side_menu_open { min-width: 0; }
  .content { width: auto; padding: 0 32px 80px; }
  .uio_title:after { width: auto; }
  .header .section_header,
  .header .login_inner,
  .header .section_sub_menu_wrap { width: auto; padding: 0 32px; }
  .footer .section_footer { width: auto; padding: 48px 32px; }
  .header .area_global { right: 32px; }
  .footer .footer_inner { padding-right: 0; }
  .footer .area_sns.is_change { right: 0; }
  .intro_box { width: auto; }
  .intro_box .text_intro { margin: 0 32px; }
  .section_spot .spot_homesite { left: 0; width: 100%; margin-left: 0; padding: 0 24px; box-sizing: border-box; }
  .section_spot .is_center { width: 100%; margin-left: 0; }
  .section_spot .spot_images .btn_play_area { left: 0; width: auto; margin-left: 0; right: 24px; }

  /* 본문 사진: 원본 비율 유지하며 화면 폭에 맞춤 */
  .content img { max-width: 100%; }

  /* 메인 이미지 갤러리: 고정폭 모자이크 → 2열 정사각 격자 (사진 순서 동일) */
  /* li의 display는 '더보기' 스크립트가 인라인으로 제어하므로 건드리지 않고, 내부만 2열 float로 배치 */
  .gallery_box .list_gallery li { height: auto !important; padding-left: 0 !important; margin-bottom: 0; }
  .gallery_box .list_gallery li:after { display: block; clear: both; content: ""; }
  .gallery_box .list_gallery li .thumb_area {
    display: block; position: relative !important; top: auto !important; left: auto !important;
    float: left; width: calc(50% - 5px) !important; height: 0 !important; margin: 0 10px 10px 0 !important;
    padding-top: calc(50% - 5px);
  }
  .gallery_box .list_gallery li .thumb_area:nth-of-type(2n) { margin-right: 0 !important; }
  .gallery_box .list_gallery li .thumb_area img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0 !important;
    -o-object-fit: cover; object-fit: cover;
  }

  /* 지도 높이 축소 */
  .map_area .map, .info_box .map { height: 320px; }

  /* 전체보기 메뉴: 오른쪽 320px 패널 → 화면 위 덮는 패널 (본문을 밀어내지 않음) */
  .is_side_menu_open .fc_wrap { right: 0; }
  .is_side_menu_open .header.is_active,
  .main .is_side_menu_open .header,
  .main .is_side_menu_open .header .area_login { right: 0 !important; }
  .is_side_menu_open .side_menu { width: 100%; max-width: 360px; box-shadow: -4px 0 16px rgba(0, 0, 0, .25); }

  /* 이미지 확대 뷰어(1100×710 고정) — restore.js가 화면 폭에 맞는 배율(--restore-vscale)을 계산 */
  .ly_view { -webkit-transform: scale(var(--restore-vscale, 1)); transform: scale(var(--restore-vscale, 1)); }
}

@media all and (max-width: 1023px) {
  .header .area_navbar { display: none; }
  .header .area_logo:after { display: none; }
  .header .area_inner { padding: 24px 0 22px; min-height: 26px; }
  .header .area_global { top: 50%; margin-top: -13px; }
  .header .area_global .btn_view_all { min-height: 44px; margin-top: -9px; }
  /* 메인은 원본에서 상단 로고가 숨겨져 있고 가로 메뉴가 대신했음 → 메뉴를 숨기는 대신 사이트명 표시 */
  .main .header .area_logo { display: inline-block; }
  .main .header:not(.is_active) .area_logo .site_name a { color: #fff; }
  /* 하위 메뉴 막대는 가로 스크롤 */
  .header .section_sub_menu_wrap { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .main .slide_box, .main .slide_box .swiper-container,
  .main .slide_box .swiper-slide, .main .slide_box img { height: 300px; }
}

@media all and (max-width: 767px) {
  .content { padding: 0 16px 60px; }
  .header .section_header,
  .header .login_inner,
  .header .section_sub_menu_wrap { padding: 0 16px; }
  .header .area_logo .site_name { font-size: 20px; }
  .header .area_global { right: 16px; }
  .intro_box .text_intro { margin: 0 16px; font-size: 16px; }
  .section_spot .spot_homesite .site_description { font-size: 14px; }
  .footer .section_footer { padding: 36px 16px 100px; }
  .footer .area_sns.is_change { position: static; margin-top: 20px; }
  .main .uio_box { margin-top: 56px; }
  .uio_title { margin-bottom: 28px; }
  .main .slide_box, .main .slide_box .swiper-container,
  .main .slide_box .swiper-slide, .main .slide_box img { height: 220px; }
  .map_area .map, .info_box .map { height: 260px; }

  /* 오시는길 정보: 제목(168px 고정 열) / 내용을 위아래로 배치 */
  .info_box .map_adr { padding: 0 4px; margin: 24px 0; max-height: none; }
  .info_box .map_ico_btn_wrap { position: static; margin-top: 14px; }
  .info_box .map_ico_btn_wrap [class^=btn_] { margin: 0 4px 0 0; height: 44px; line-height: 44px; }
  .info_box .map_ico_btn_wrap .nicon { margin-top: 0; vertical-align: middle; }
  .info_box .list_info { padding: 22px 0; }
  .info_box .list_info .item_title { float: none; width: auto; padding-left: 4px; margin-bottom: 12px; }
  .info_box .list_info .item_description,
  .info_box .area_aaccount .list_info .item_description { width: auto; margin-left: 30px; padding-right: 0; }
  .info_box .area_aaccount .list_info .item_description .sub_text { width: auto; }

  /* 우측 고정 버튼: 60px → 48px (터치 최소 44px 이상 유지), 호버 확장 비활성 */
  .floating_item { right: 12px; bottom: 16px; }
  .floating_item .link_item,
  .floating_item .link_item:hover,
  .floating_item .link_item:focus { width: 48px; height: 48px; padding: 0; }
  .floating_item .link_item .icon { height: 48px; line-height: 48px; font-size: 22px; }
  .floating_item .link_item .text { display: none !important; }
  .floating_item .link_item .icon_top { margin-top: 9px; }
}

/* ------------------------------------------------------------------
 * 포토 게시판 (금곡효요양병원) — 원본 서버가 그리던 부분의 대체 화면
 * ------------------------------------------------------------------ */
/* 목록형 보기는 서버가 다른 HTML(표)을 내려주던 방식이라 정적 사이트에서 재현 불가 → 카드형만 사용, 전환 버튼 숨김 */
.board_box .uio_title ._viewType { display: none; }

/* 글 보기 화면 (원본 상세 화면 HTML은 백업에 없음 — 게시판 색·선 스타일에 맞춘 대체 화면) */
.restore_board_view { border-top: 2px solid #474b53; }
.restore_board_head { padding: 24px 4px 18px; border-bottom: 1px solid #ebebeb; }
.restore_board_title { display: block; font-size: 20px; line-height: 1.5; letter-spacing: -.8px; color: #000; word-break: keep-all; }
.restore_board_date { display: block; margin-top: 6px; font-family: Roboto, sans-serif; font-size: 13px; color: #aaa; }
.restore_board_body { padding: 30px 4px 40px; border-bottom: 1px solid #ebebeb; }
.restore_board_img { margin-bottom: 16px; text-align: center; }
.restore_board_img img { max-width: 100%; height: auto; }
.restore_board_text { font-size: 15px; line-height: 1.85; color: #444; word-break: keep-all; word-wrap: break-word; }
.restore_board_empty { padding: 80px 0; text-align: center; font-size: 15px; color: #888; }
.restore_board_foot { padding: 24px 0; text-align: right; }
.restore_board_foot .btn { display: inline-block; min-width: 80px; height: 44px; padding: 0 20px; border: 1px solid #d5d5d5; background: #fff;
  font-size: 14px; line-height: 42px; color: #333; text-align: center; text-decoration: none; }

/* 메인 '포토 게시판' 요약: 글이 없을 때 (원본 게시판의 '등록된 글이 없습니다' 표시와 같은 아이콘·문구) */
.restore_board_nodata { padding: 50px 0; border: 1px solid #ebebeb; border-width: 1px 0; text-align: center; }
.restore_board_nodata .icon { display: block; font-size: 40px; color: #eee; }
.restore_board_nodata .title { display: block; margin-top: 12px; font-size: 15px; font-weight: normal; color: #999; }

@media all and (max-width: 1279px) {
  .main .board_box .item { width: 32%; }
  .main .board_box .item + .item { margin-left: 2%; }
  /* 원본의 항목 사이 장식선(:after, right:-20px)이 좁은 화면에서 오른쪽으로 삐져나와 가로 스크롤을 만듦 */
  .main .board_box .item:after { display: none; }
}
@media all and (max-width: 767px) {
  .main .board_box .item { float: none; width: auto; }
  .main .board_box .item + .item { margin: 24px 0 0; }
  /* 게시판 카드: 3열 → 1열 (eg.InfiniteGrid가 카드 높이를 다시 계산) */
  .board_box .card_type #grid { margin-left: 0 !important; }
  .board_box .card_board { width: 100%; padding-left: 0; }
  .board_box .card_type { padding-top: 0; }
  .board_box .card_type:before { display: none; }
  .board_box .card_type .search_area { position: static; margin: 0 0 16px; }
  .board_box .card_type .search_area .list_srch { width: auto; }
}

/* 메인 상단 배너 (금곡효요양병원): 배너 사진 자체에 큰 글자가 들어 있어, 좁은 화면에서는 위에 겹친 병원명·소개와 글자가 겹친다
   → 767px 이하에서만 병원명·소개 박스를 배너 아래로 내림 (PC·태블릿은 원본 배치 그대로) */
@media all and (max-width: 767px) {
  .section_spot { height: auto !important; }
  /* 배너는 헤더(73px) 아래부터 사진 비율(956×695) 그대로 전체 표시, 헤더 뒤는 배너 바탕색(사진 가장자리 색 #1d2941)으로 채움 */
  .section_spot .spot_images { position: relative; height: calc(73px + 72.7vw); background: #1d2941; }
  .section_spot .spot_images .img_cover { position: absolute; left: 0; right: 0; top: 73px; bottom: 0; width: auto; height: auto; background-size: 100% 100% !important; }
  .section_spot .spot_homesite { position: relative; top: auto; bottom: auto; height: auto; padding: 24px 16px; background: #474b53; }
}