@charset "utf-8";
/* ============================================================
 * 모바일 보정 — PC 전용 페이지를 좁은 화면에서 쓸 수 있게 한다
 *
 * 이 파일은 media="(max-width: 768px)" 로만 불린다.
 * PC 화면에는 한 줄도 적용되지 않으므로 기존 디자인은 그대로다.
 *
 * 순서: css2/master.css → css2/m/master.css → 이 파일
 *   원본 모바일 CSS 가 본문 섹션 대부분을 잡아 준다.
 *   여기서는 그것이 못 잡는 것만 다룬다 — 헤더·전역메뉴가 대부분이다.
 *   (PC 헤더와 모바일 헤더는 마크업이 아예 달라서 CSS 재사용이 안 된다.
 *    모바일 헤더를 이식하는 대신 PC 헤더를 좁은 화면용으로 고쳤다.
 *    링크가 한 벌로 유지되고, 원본에서 404 나는 아이콘도 안 쓴다.)
 * ============================================================ */

@media (max-width: 768px) {

  /* ── 세로 스크롤 복구 ── ★ 가장 중요
     PC 는 fullpage.js 가 섹션을 한 화면씩 넘기는 구조라 #wrap/.section 에
     height:100% 가 걸려 있다. 모바일에서는 강제 스크롤을 껐으므로
     그 높이 제한이 남으면 본문이 첫 화면에서 잘리고 스크롤이 아예 안 된다.
     (실제로 게시판 본문 2498px 중 844px 만 보였다.)
     높이를 풀어 내용만큼 늘어나게 한다. */
  html, body { height: auto !important; overflow-y: visible !important; }
  #wrap, #fullpage, #subwrap { height: auto !important; min-height: 0 !important; }

  /* 섹션은 height:auto 로 풀되 min-height 를 남긴다.
     메인 섹션들은 내용이 절대배치라 auto 로만 두면 높이가 110px 로 무너진다.
     (한 번 그렇게 만들었다가 메인이 다 겹쳤다.) */
  .section, .fp-section, .fp-tableCell {
    height: auto !important; min-height: 100vh;
  }
  .section { padding-top: 60px; padding-bottom: 30px; box-sizing: border-box; }

  /* ── 가로 스크롤 차단 ──
     한 요소만 삐져나가도 페이지 전체가 옆으로 밀린다. */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, video { max-width: 100%; height: auto; }

  /* ── 헤더 ──
     PC 는 로고(282px) + 가로 메뉴(996px) + 우측 유틸이 한 줄에 들어간다.
     390px 에서는 불가능하다. 가로 메뉴를 접고 로고 + Menu 만 남긴다.
     Menu 를 누르면 원래 있던 전체메뉴(#allmenu)가 열리므로
     메뉴 항목은 하나도 잃지 않는다. */
  header { height: 54px; }
  header #logo { top: 13px; left: 12px; width: 150px; }
  header nav { display: none !important; }

  header #util { top: 7px; right: 10px; }
  header #util li.lang1,
  header #util li.lang2 { display: none; }        /* ENG/KOR 은 전체메뉴 안에 있다 */
  header #util li.vip { width: 34px; height: 34px; line-height: 34px; font-size: 12px; }
  header #util li.allmenu { width: 74px; height: 34px; line-height: 34px; font-size: 14px; }

  /* ── 전체메뉴(Menu 를 누르면 열리는 검은 화면) ──
     PC 는 1080px 폭에 3열을 띄운다. 세로 한 줄로 바꾸고 스크롤을 준다. */
  #allmenu { min-width: 0; }
  #allmenu.on,
  #allmenu[style*="height"] { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* fullpage.js 가 만드는 좌측 점 네비게이션.
     화면이 좁으면 본문·전체메뉴 위로 겹쳐 올라온다. 모바일에서는 뺀다.
     (섹션 이동은 손가락 스크롤로 하면 된다.) */
  #fp-nav, .fp-slidesNav { display: none !important; }

  #allmenu .logo-alt {
    position: absolute; top: 14px; left: 16px; width: 140px; height: auto;
  }
  #allmenu .logo-alt img { width: 100%; height: auto; }
  #allmenu .allmenuclose { top: 20px; right: 16px; width: 22px; }
  #allmenu .allmenuclose img { width: 100%; }

  #allmenu-gnb {
    width: 100%; height: auto; padding: 84px 20px 60px; box-sizing: border-box;
  }
  #allmenu-gnb .ag-left,
  #allmenu-gnb .ag-center,
  #allmenu-gnb .ag-right {
    float: none; width: 100%; height: auto;
    padding: 0 0 26px; margin: 0 0 26px;
    left: 0; filter: none; opacity: 1;        /* PC 는 열릴 때 흐림→선명 연출을 한다.
                                                 좁은 화면에서는 지연이 답답해 바로 보여준다. */
    border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  #allmenu-gnb .ag-right { border-bottom: 0; margin-bottom: 0; }

  /* 1depth */
  #allmenu-gnb .gnb1td,
  #allmenu-gnb .center1dt > a,
  #allmenu-gnb .center1dta {
    font-size: 18px; line-height: 1.9;
  }
  /* 2depth — 한 줄에 두 개씩 흘려 세로 길이를 줄인다 */
  #allmenu-gnb ul ul { display: flex; flex-wrap: wrap; gap: 0 14px; margin-bottom: 8px; }
  #allmenu-gnb ul ul li { width: auto; }
  #allmenu-gnb .gnb2td { font-size: 14px; line-height: 2.1; opacity: .78; }

  /* ── 우측 고정 퀵버튼(EVENT/TALK/N/상담) ──
     PC 크기 그대로면 화면의 1/4를 가린다. */
  .rightquick, .rightquick2 { transform: scale(.72); transform-origin: 100% 100%; }

  /* ── 게시판 표 ──
     원본은 colgroup 으로 폭을 픽셀 고정한다. 그대로면 표가 1280px 이 되어
     390px 화면에서 오른쪽이 잘린다. 폭 고정을 풀고 화면에 맞춘다.
     그래도 넘치면 표만 가로로 스크롤되게 둔다 — 페이지 전체가 밀리는 것보다 낫다. */
  /* ── 서브 페이지 공통 컨테이너 ──
     #subwrap 이 1280px 로 고정돼 있다. 게시판·콘텐츠 페이지가 전부 이 안에
     들어가므로, 여기만 풀면 안쪽이 따라온다. (표가 1280px 이던 원인) */
  #wrap, #fullpage, #subwrap, #container, #content {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  #subwrap { padding-left: 14px; padding-right: 14px; box-sizing: border-box; }

  /* ★ class 가 아니라 id 다 — <div id="listtablewrap"><table id="listtable"> */
  #listtablewrap, .boardwrap, .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #listtable,
  #listtablewrap table,
  .boardwrap table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
  #listtablewrap col,
  .boardwrap col { width: auto !important; }
  #listtablewrap th, #listtablewrap td,
  .boardwrap th, .boardwrap td {
    padding: 10px 6px; font-size: 13.5px; white-space: normal; word-break: break-word;
  }
  /* 글 보기 — .viewTable 은 데이터 표가 아니라 레이아웃용 표다.
     칸 폭을 풀면 제목·날짜가 좁은 칸에 갇혀 더 어색해진다.
     모바일에서는 표 구조를 버리고 세로로 쌓는다. */
  .viewTable, .viewTable tbody, .viewTable tr, .viewTable td {
    display: block; width: 100% !important; box-sizing: border-box;
  }
  .viewTable colgroup { display: none; }
  .viewTable td { padding: 0 0 12px; border: 0; }

  /* 글 보기 — 제목·날짜 */
  /* 원본은 제목·날짜를 절대배치/우측정렬로 잡는다. 좁은 화면에서는
     글자가 화면 밖으로 삐져나가고 날짜가 세로로 쪼개진다. 흐름 배치로 되돌린다. */
  .viewTable .title, .viewTable .day {
    position: static !important; float: none !important;
    width: auto !important; left: auto !important; right: auto !important; top: auto !important;
    text-align: left !important; padding: 0 !important;
  }
  .viewTable .title { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; }
  .viewTable .day { font-size: 12.5px; color: #767676; margin: 0 0 4px; white-space: nowrap; }
  .viewTable .day span { margin-left: 8px; }
  .viewTable .contents img { max-width: 100%; height: auto; }
  .viewTable .contents { line-height: 1.8; }
  /* 번호 칸은 좁은 화면에서 자리만 차지한다. 제목·등록일만 남긴다. */
  #listtable th:first-child,
  #listtable td:first-child { display: none; }

  /* ── 본문 공통 ──
     원본 모바일 CSS 가 대부분 잡지만, PC 전용 마크업에만 있는 것들이 남는다. */
  #fullpage, .section { min-width: 0; }
  .section { padding-left: 0; padding-right: 0; }

  /* 슬라이드(slick)·표는 넘치기 쉽다 */
  .slick-slider, .slick-list, .slick-track { max-width: 100%; }
  table { max-width: 100%; }

  /* ── 푸터 ── */
  footer, #footer { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }

  /* ── 팝업 ──
     .pop_wrap 은 원본 CSS 가 width:100% 로 잡는데, 조상에 transform 이 걸린
     페이지에서는 기준이 화면이 아니라 그 요소가 되어 화면보다 넓어진다.
     화면을 덮도록 못 박는다. */
  .elz-rollpop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
  .elz-rollpop .popview { width: 100% !important; right: auto !important; }
  .elz-rollpop .popFadeImg li img { width: 100%; height: auto; display: block; }
  .elz-rollpop .close_bt { position: sticky; bottom: 0; }
}