/*
 * 화명힐링의원 복원 사이트 — 보완 스타일
 * 원본 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; }
}