@charset "utf-8";
/* =========================================================================
   responsive.css  —  온양제일호텔(THE CHEIL HOTEL ONYANG) 반응형 오버라이드
   ---------------------------------------------------------------------------
   ▶ 기존 CSS(layout.css / main.css / rooms.css / facilities.css 등)를 수정하지
      않고 "덮어쓰기" 방식으로 반응형을 적용하는 파일입니다.
   ▶ common.css 뒤(맨 마지막)에 link 하세요.
   ---------------------------------------------------------------------------
   [연회장 정확 구조 반영 — banquet.asp]
     .hallname = 홀 탭(크리스탈홀 tab_b01_on.gif)
     .hallimg  = 큰 홀 전경(banimg_01_1.jpg)
     .hlist    = 이미지 전환 '점' 네비게이션(list_b.gif / list_b_on.gif) ← 작은 아이콘!
     .banstl   = 각 홀 묶음 컨테이너
     .tb_ban   = 6열 기본사항 표
   ※ 이전에 이 '점(list_b.gif)'을 썸네일 사진으로 오해해 크게 늘려서 큰 원형으로 보였음.
     → 이번엔 .hlist 점을 원본 크기(작게)로 복원.
   ========================================================================= */

/* 0. box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* 1. 이미지·표 기본 보정 */
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* =========================================================================
   2. 태블릿 이하 (max-width:1000px)
   ========================================================================= */
@media screen and (max-width: 1000px) {
  html, body { overflow-x: hidden; }
  #wrap, #header, #container, #subnavi, .fooarea,
  #header_m, #contents_m, .news_m {
    width: 100% !important; max-width: 1000px;
    margin-left: auto !important; margin-right: auto !important;
  }
  #contents, .sub_contents {
    width: auto !important; margin-left: 15px !important; margin-right: 15px !important; padding: 0 !important;
  }
  #sideconts { display: none !important; }
  #body_bg_wrap, #body_bg, #body_bg li, #body_bg li img {
    width: 100% !important; max-width: 100% !important;
    left: 0 !important; margin-left: 0 !important; height: auto !important;
  }
}

/* =========================================================================
   3. 모바일 (max-width:768px) — 메뉴/헤더/푸터 + 햄버거
   ========================================================================= */
@media screen and (max-width: 768px) {
  #header, #header_m { height: auto !important; padding: 10px 0 !important; }
  h1.logo { float: none !important; text-align: center; margin: 10px 0 !important; }
  h1.logo img { max-width: 200px; }
  #topnavi, ul.sidenavi { display: none !important; }
  #m_menu_btn {
    display: block; position: absolute; top: 14px; right: 14px;
    width: 44px; height: 40px; border: 1px solid #b19b75; border-radius: 4px;
    background: #fff; cursor: pointer; z-index: 1000; padding: 9px 8px;
  }
  #m_menu_btn span { display: block; height: 3px; margin: 4px 0; background: #967935; border-radius: 2px; }
  #m_nav { display: none; width: 100%; background: #fff; border-top: 2px solid #967935; border-bottom: 1px solid #e5e5e5; }
  #m_nav.open { display: block; }
  #m_nav ul { margin: 0; padding: 0; list-style: none; }
  #m_nav li { border-bottom: 1px solid #eee; }
  #m_nav li a { display: block; padding: 14px 18px; font-size: 15px; color: #4a3f2a; letter-spacing: -0.5px; }
  #m_nav li a:hover, #m_nav li a:active { background: #f6f1e6; color: #967935; }
  #m_nav .m_lang { padding: 12px 18px; background: #faf7f0; }
  #m_nav .m_lang a { display: inline-block; margin-right: 10px; }

  /* ----- 메인 페이지 히어로 ----- */
  #header_m { min-height: 0 !important; height: auto !important; padding: 0 !important; }
  #body_bg_wrap { display: none !important; }
  #contents_m {
    height: auto !important; padding: 0 0 22px !important; overflow: visible !important;
    position: relative;
    background: #1b1b1b url(/images/main/bg01.jpg) center top / cover no-repeat !important;
  }
  #contents_m::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.6)); z-index: 0;
  }
  .mleft {
    float: none !important; width: auto !important; position: relative; z-index: 1;
    text-align: center; margin: 0 !important; padding: 30px 15px 6px !important;
  }
  .mleft h1.mtitle { margin: 0 auto 12px !important; }
  .mleft h1.mtitle img { max-width: 74%; height: auto; }
  .mleft .event2 { text-align: center; }
  .mleft .event2 img { max-width: 92%; height: auto; }
  .mleft .sns, .mleft .sns dl { width: auto !important; }
  #mnavi {
    float: none !important; width: auto !important; position: relative; z-index: 1;
    margin: 0 !important; padding: 8px 12px 0 !important; overflow: visible !important;
  }
  #mnavi ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #mnavi ul li { float: none !important; padding: 0 !important; margin: 0 !important; }
  #mnavi ul li a, #mnavi ul li img { display: block; width: 100%; height: auto; }

  /* ----- 서브페이지 상단 서브메뉴(#subnavi) ----- */
  #subnavi {
    width: 100% !important; height: auto !important; overflow: visible !important;
    background: #48413a; padding: 10px 8px 16px !important; box-sizing: border-box; text-align: center;
  }
  #subnavi h2 { float: none !important; margin: 6px 0 10px !important; text-align: center; }
  #subnavi h2 img { max-width: 62%; height: auto; }
  #subnavi ul.sgnb {
    float: none !important; margin: 0 !important; padding: 0 !important;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  }
  #subnavi ul.sgnb li { float: none !important; margin: 0 !important; }
  #subnavi ul.sgnb li img { max-width: 100%; height: auto; }
  .title_area h3 { float: none !important; margin: 0 0 8px !important; }
  .title_area ul { float: none !important; margin: 0 !important; }
  .title_area h3 img { max-width: 100%; height: auto; }
  #contents { margin: 15px !important; }
  .fooarea { padding: 15px !important; text-align: center; }
  .fooarea .footer_logo, .fooarea .footer_right { float: none !important; margin: 8px auto !important; text-align: center; }
  .fooarea .footer_right .footer_copy { font-size: 11px; line-height: 1.6; }
  .footer_menu ul { margin: 0 0 12px !important; text-align: center; }
}

/* =========================================================================
   4. 메인 팝업(수상 팝업) 반응형
   ========================================================================= */
@media screen and (max-width: 768px) {
  #awardPopup {
    width: 90% !important; max-width: 400px !important; left: 50% !important; top: 50% !important;
    margin-left: 0 !important; margin-top: 0 !important; transform: translate(-50%, -50%) !important;
    max-height: 90vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
  #awardPopup img { max-width: 100% !important; height: auto !important; display: block; }
  #awardPopup .popupFooter {
    position: -webkit-sticky !important; position: sticky !important; bottom: 0 !important;
    text-align: center !important; padding: 12px !important;
  }
  #awardPopup .popupFooter button { padding: 12px 30px !important; font-size: 15px !important; }
  #awardPopup .popupFooter label { font-size: 13px !important; }
}

/* =========================================================================
   5. 데스크톱(1001px 이상)에서는 모바일 요소 숨김
   ========================================================================= */
@media screen and (min-width: 1001px) {
  #m_menu_btn, #m_nav { display: none !important; }
}

/* =========================================================================
   6. [강화] 서브페이지 우측/양쪽 짤림 해결 — 고정폭(px) 강제 무력화
   ========================================================================= */
@media screen and (max-width: 768px) {
  #container, #contents, .sub_contents {
    width: auto !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box;
  }
  #contents { margin: 15px !important; padding: 0 !important; }

  /* 블록 요소 고정폭 무력화 (인라인 텍스트 span/em 등은 제외) */
  #contents div, #contents table, #contents tr, #contents td, #contents th,
  #contents ul, #contents ol, #contents li, #contents p, #contents dl,
  #contents section, #contents article,
  .sub_contents div, .sub_contents table, .sub_contents td, .sub_contents th,
  .sub_contents ul, .sub_contents li, .sub_contents p {
    max-width: 100% !important;
  }
  #contents [width], #contents [style*="width"],
  .sub_contents [width], .sub_contents [style*="width"] {
    width: auto !important; max-width: 100% !important;
  }

  /* 이미지(탭/타이틀 포함)를 화면폭 안으로 캡 */
  #contents img, .sub_contents img, .title_area img,
  [class*="title"] img, [class*="tab"] img, [id*="tab"] img {
    max-width: 100% !important; height: auto !important;
  }

  /* 좌우 2단 플로팅 박스 → 세로 1단 */
  #contents [class*="sum"], #contents [class*="sub_intro"], #contents [class*="sub_hotel"],
  #contents [class*="reserv"], #contents [class*="box"], #contents .r_box_eng,
  #contents .fl, #contents .fr,
  #contents td[align="right"], #contents td[align="left"] {
    float: none !important; width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important; display: block;
  }

  /* 표 → 화면폭 꽉 채워 표시 (한글 keep-all) */
  #contents table, .sub_contents table {
    width: 100% !important; max-width: 100% !important; table-layout: auto !important; border-collapse: collapse;
  }
  #contents th, #contents td, .sub_contents th, .sub_contents td {
    width: auto !important; min-width: 0 !important;
    white-space: normal !important; word-break: keep-all !important;
    padding: 8px 6px !important; font-size: 13px !important; line-height: 1.5 !important;
  }
  #contents td img, #contents th img { max-width: 100% !important; height: auto !important; }

  /* [예외] 열이 많은 넓은 표 → 좌우 스크롤 */
  .table_map, .table_map_la, .table_map02, .tb_intro, .hotel_sum02_1 {
    display: block !important; width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    white-space: nowrap; border: 1px solid #e0e0e0;
  }
  .table_map th, .table_map td, .table_map_la th, .table_map_la td,
  .table_map02 th, .table_map02 td, .tb_intro th, .tb_intro td {
    white-space: nowrap !important; word-break: keep-all !important; width: auto !important;
  }
  p.img_map, p.img_map img { width: 100% !important; max-width: 100% !important; height: auto !important; }
  body { overflow-x: hidden; }
}

/* =========================================================================
   7. 연회장(banquet.asp) 갤러리 — 정확한 클래스 기반 정조준
   ========================================================================= */
@media screen and (max-width: 768px) {

  /* (A) 각 홀 묶음 컨테이너 */
  #contents .banstl {
    position: relative !important;
    width: auto !important; max-width: 100% !important;
    height: auto !important; overflow: visible !important; float: none !important;
  }
  #contents .brclear { clear: both !important; }

  /* (B) 홀 탭(크리스탈홀 tab_b01_on.gif) — 작은 이미지 버튼 줄 */
  #contents .hallname {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    margin: 0 0 10px !important; padding: 0 !important; list-style: none !important;
    justify-content: flex-start !important;
  }
  #contents .hallname li { float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; display: inline-block !important; }
  #contents .hallname li a { display: inline-block !important; line-height: 0 !important; }
  #contents .hallname li img { width: auto !important; height: auto !important; max-width: 110px !important; display: block !important; }

  /* (C) 큰 홀 전경 이미지(banimg_01_1.jpg) — 화면폭 100% */
  #contents .hallimg {
    position: relative !important;
    width: 100% !important; max-width: 100% !important; height: auto !important;
    overflow: visible !important; float: none !important; margin: 0 0 8px !important;
  }
  #contents .hallimg img {
    width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important;
  }

  /* (D) ★ 이미지 전환 '점' 네비게이션(.hlist: list_b.gif) — 원본 크기(작게) 복원 */
  #contents .hlist {
    position: static !important;
    display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
    justify-content: center !important;
    margin: 0 0 14px !important; padding: 0 !important; list-style: none !important;
    float: none !important; clear: both !important;
    width: auto !important; max-width: 100% !important; height: auto !important;
  }
  #contents .hlist li {
    position: static !important; float: none !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
    width: auto !important; height: auto !important;
  }
  #contents .hlist li a { display: block !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; }
  #contents .hlist li img {
    width: auto !important;
    height: auto !important;
    max-width: 22px !important;    /* ← 작은 점. 더 크게: 30px, 작게: 16px */
    display: block !important;
    margin: 0 !important;
  }

  /* (E) 연회장 6열 "기본사항" 표(.tb_ban) — 화면폭 균등 분배 */
  #contents .wdtbl { width: auto !important; max-width: 100% !important; overflow: visible !important; }
  #contents table.tb_ban {
    display: table !important; width: 100% !important; max-width: 100% !important;
    table-layout: fixed !important; border-collapse: collapse;
  }
  #contents table.tb_ban col { width: auto !important; }
  #contents table.tb_ban th, #contents table.tb_ban td {
    white-space: normal !important; word-break: keep-all !important;
    width: auto !important; padding: 6px 3px !important; font-size: 12px !important; text-align: center;
  }
  /* 연회예약실 안내 이미지 폭 맞춤 */
  #contents .ban_info img { max-width: 100% !important; height: auto !important; }

  /* =======================================================================
     (F) 객실/부대시설 등 '실제 사진 썸네일'(chImg)이 큰 사진 위에 겹칠 때
         — 절대배치/플로팅 해제해서 큰 사진 아래로. (banquet .hlist 는 위에서 이미 처리)
     ======================================================================= */
  #contents a[href*="chImg"]:not(.hlist a),
  #contents a[onclick*="chImg"] {
    position: static !important;
    float: none !important;
  }
}

/* =========================================================================
   8. 객실(standarddouble.asp 등) 갤러리 — 정확한 클래스 기반 정조준
   ---------------------------------------------------------------------------
     .sb_tab     = 탭 메뉴(스탠다드더블룸/트윈룸 tab_r03_on.gif)
     .roomimgbox = 룸이미지 전체 박스
     .rimg_b     = 큰 룸 사진(roomimg_03_1.jpg, id=bimg)
     .rlist      = 작은 룸 썸네일 4장(roomimg_03_1s.jpg, onclick 으로 큰사진 교체) ← 실제 사진!
     .rimgtxt    = 사진 설명 문구
     .tb_room    = 객실정보 2열 표
   ▶ 연회장 .hlist(점)과 달리, .rlist 는 '실제 썸네일 사진'이므로
     큰 사진 아래에 가로로 예쁘게 배치.
   ========================================================================= */
@media screen and (max-width: 768px) {

  /* (A) 탭 메뉴(.sb_tab): 가로로 흐르게 + 이미지 화면 안으로 (짤림 방지) */
  #contents .sb_tab {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    margin: 0 0 12px !important; padding: 0 !important; list-style: none !important;
    width: auto !important; max-width: 100% !important;
    justify-content: flex-start !important; overflow: visible !important;
  }
  #contents .sb_tab li {
    float: none !important; display: inline-block !important;
    width: auto !important; max-width: 48% !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important; vertical-align: top;
  }
  #contents .sb_tab li a { display: block !important; line-height: 0 !important; }
  #contents .sb_tab li img {
    width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important;
  }

  /* (B) 룸이미지 박스: 유동화(겹침/짤림 방지) */
  #contents .roomimgbox {
    position: relative !important;
    width: auto !important; max-width: 100% !important;
    height: auto !important; overflow: visible !important; float: none !important;
  }

  /* (C) 큰 룸 사진(.rimg_b): 화면폭 100% */
  #contents .rimg_b {
    position: relative !important;
    width: 100% !important; max-width: 100% !important; height: auto !important;
    float: none !important; overflow: visible !important; margin: 0 0 8px !important;
  }
  #contents .rimg_b img {
    width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important;
  }

  /* (D) ★ 작은 룸 썸네일(.rlist): 큰 사진 '아래'에 가로 4개 배치 (겹침 완전 해제) */
  #contents .rlist {
    position: static !important;      /* 절대배치였다면 해제 → 큰 사진 위 겹침 제거 */
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    justify-content: flex-start !important;
    margin: 0 0 10px !important; padding: 0 !important; list-style: none !important;
    float: none !important; clear: both !important;
    width: auto !important; max-width: 100% !important; height: auto !important; overflow: visible !important;
  }
  #contents .rlist li {
    position: static !important; float: none !important;
    display: block !important;
    width: calc((100% - 18px) / 4) !important;   /* ← 4개. 3개:(100%-12px)/3 · 2개:(100%-6px)/2 */
    height: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
  }
  #contents .rlist li img {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; display: block !important; margin: 0 !important;
    cursor: pointer;
  }

  /* (E) 사진 설명 문구(.rimgtxt): 폭 맞춤 */
  #contents .rimgtxt { clear: both !important; margin: 6px 0 12px !important; }
  #contents .rimgtxt img { max-width: 100% !important; height: auto !important; }

  /* (F) 객실정보 표(.tb_room): 2열 → 화면폭 꽉 채워 표시 */
  #contents .sub_room02 { width: auto !important; max-width: 100% !important; }
  #contents table.tb_room {
    display: table !important; width: 100% !important; max-width: 100% !important;
    table-layout: auto !important; border-collapse: collapse;
  }
  #contents table.tb_room col { width: auto !important; }
  #contents table.tb_room th { width: 34% !important; white-space: nowrap !important; }
  #contents table.tb_room td { width: auto !important; }
  #contents table.tb_room th, #contents table.tb_room td {
    word-break: keep-all !important; padding: 10px 8px !important; font-size: 13px !important;
  }

  /* (G) 상세설명 제목/목록: 글자 목록은 세로 그대로(가로배치 금지) */
  #contents .sub_room03 { width: auto !important; max-width: 100% !important; }
  #contents .sub_room03 .room_tt img,
  #contents .sub_room03 .stitle_r img { max-width: 100% !important; height: auto !important; }
  #contents .bl_con, #contents .bl_con02 {
    display: block !important;        /* flex 금지 → 서비스/설비 글자 목록 세로 유지 */
    width: auto !important; max-width: 100% !important;
    margin: 6px 0 16px !important; padding: 0 0 0 4px !important; list-style: none !important;
  }
  #contents .bl_con li, #contents .bl_con02 li {
    display: list-item !important; list-style: disc inside !important;
    float: none !important; width: auto !important;
    margin: 0 0 6px !important; padding: 0 !important;
    font-size: 13px !important; line-height: 1.6 !important; word-break: keep-all !important;
  }

  /* (H) 예약 영역(.reinfo/.rebtn): 세로 정렬 + 버튼 이미지 폭 맞춤 */
  #contents .reinfo { width: auto !important; max-width: 100% !important; text-align: center; }
  #contents .reinfo p img { max-width: 100% !important; height: auto !important; }
  #contents .rebtn { margin: 10px 0 0 !important; text-align: center; }
  #contents .rebtn a { display: inline-block !important; }
  #contents .rebtn img { max-width: 100% !important; height: auto !important; }
}

/* =========================================================================
   9. 부대시설(miso.asp 등) — 객실과 room.css 공유, 표/정보 영역만 추가
   ---------------------------------------------------------------------------
   ▶ miso.asp 는 .sb_tab / .roomimgbox / .rimg_b / .rlist 를 객실과 '공유'하므로
     섹션 8이 이미지·썸네일을 그대로 처리합니다(6장도 자동 줄바꿈).
   ▶ 여기서는 부대시설 전용:
       .tb_fac   = 3열 정보표(영업시간/메뉴/가격)  → 화면폭 꽉 채움
       .facinfo  = 시설정보 영역
       .bl_con_f = 시설정보 글자 목록(세로 유지)
   ========================================================================= */
@media screen and (max-width: 768px) {

  /* (A) 3열 정보표(.tb_fac): 화면폭 꽉 채워 표시 (열 적어서 줄바꿈으로 다 보임) */
  #contents table.tb_fac {
    display: table !important; width: 100% !important; max-width: 100% !important;
    table-layout: fixed !important; border-collapse: collapse; margin: 8px 0 0 !important;
  }
  #contents table.tb_fac col { width: auto !important; }
  #contents table.tb_fac th, #contents table.tb_fac td {
    white-space: normal !important; word-break: keep-all !important;
    width: auto !important; padding: 8px 5px !important; font-size: 12.5px !important; text-align: center;
  }

  /* (B) 시설정보 영역(.facinfo): 유동화 */
  #contents .facinfo { width: auto !important; max-width: 100% !important; clear: both !important; margin-top: 14px !important; }
  #contents .facinfo .finfo img { max-width: 100% !important; height: auto !important; }

  /* (C) 시설정보 글자 목록(.bl_con_f): 세로 유지 (가로배치 금지) */
  #contents .bl_con_f {
    display: block !important; width: auto !important; max-width: 100% !important;
    margin: 6px 0 12px !important; padding: 0 0 0 4px !important; list-style: none !important;
  }
  #contents .bl_con_f li {
    display: list-item !important; list-style: disc inside !important;
    float: none !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important;
    font-size: 13px !important; line-height: 1.6 !important; word-break: keep-all !important;
  }

  /* (D) 메뉴다운 버튼(있을 경우) 폭 맞춤 */
  #contents .fmdown { text-align: center; margin: 10px 0 0 !important; }
  #contents .fmdown img { max-width: 100% !important; height: auto !important; }
}