/* ============================================================
   점검(업데이트) 안내 화면 전용
   쓰는 곳 : Views/Home/SystemNotice.cshtml  (Layout = null, 이 화면에서만 로드)
   같이 보기 : ~/js/systemnotice.js (확대 제스처 차단)

   이 화면은 "보기만" 하는 한 장짜리다.
     · 확대/축소(핀치·더블탭)는 막되 스크롤은 살려 둔다 — 이미지가 세로로 길어 다 봐야 한다
     · 클릭·드래그·선택을 막되, 숨겨 둔 입장 링크 하나만 예외로 살린다
   custom.css 는 이 화면에 필요한 게 없어 쓰지 않는다 (2026-10-06 분리)
   ============================================================ */

html, body {
    margin: 0;
    padding: 0;
    /*background: #ff7000;*/
    background: #ffffff;
    /*  pan-x pan-y : 스크롤은 되고 핀치 줌만 막힌다.
        none 으로 두면 모바일에서 스크롤까지 죽는다 (처음에 그렇게 됐었다)          */
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%; /* 가로모드에서 글자가 커지는 것 방지 */
    text-size-adjust: 100%;
}

body, img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;      /* 길게 눌렀을 때 뜨는 iOS 메뉴 차단 */
    -webkit-user-drag: none;
}

/*  화면을 못 누르게 한다 (스크롤에는 영향 없다) */
body {
    pointer-events: none;
}

/*  숨겨 둔 입장 통로. 이미지 우측 상단에 겹쳐 놓는다.
    position:absolute 에 top 을 주지 않아, 이미지 바로 아래(정상 위치)에서
    margin-top 만큼 위로 끌어올려 이미지 오른쪽 아래 모서리에 걸친다.
    위치를 옮기려면 right · margin-top 만 고치면 된다 (뷰 수정 불필요).           */
.sys_notice_container {
    position: absolute;
    margin-top: -20px;
    right: 10px;
}

/*  숨겨 둔 입장 링크(".") 하나만 되살린다.
    이 블록을 지우면 그 링크까지 완전히 막힌다.

    점(".")이 기본 링크 색(파랑/보라)으로 보여 눈에 띄던 것을 가린다.
    색을 배경(#ff7000)에 맞추는 대신 transparent 로 둔다 — 링크가 이미지 위에 겹쳐 있어서,
    주황으로 박아 두면 나중에 이미지가 바뀔 때 주황 점이 드러난다.
    글자는 안 보이지만 영역은 그대로라 위치를 아는 사람은 누를 수 있다.
    :visited · :focus 까지 같이 지정해야 한 번 누른 뒤에도, Tab 으로 포커스가 가도 안 보인다.   */
.sys_notice_container a,
.sys_notice_container a:link,
.sys_notice_container a:visited,
.sys_notice_container a:hover,
.sys_notice_container a:active,
.sys_notice_container a:focus {
    pointer-events: auto;
    display: inline-block;
    min-width: 28px;                  /* 손가락으로 누를 만큼만. 이미지 전체를 걸지 않는다 */
    min-height: 28px;
    color: transparent;
    background: transparent;
    text-decoration: none;            /* 투명 글자여도 밑줄은 보인다 */
    outline: none;                    /* 키보드 포커스 테두리로 위치가 드러나지 않게 */
    -webkit-tap-highlight-color: transparent;   /* 눌렀을 때 회색 박스 안 보이게 */
}

/*  원본 819 × 1280 세로 이미지.
    모바일은 가로를 꽉 채우고, 원본보다 크게 늘리지는 않는다.                      */
.sys_notice_img {
    display: block;
    width: 100%;
    max-width: 819px;
    height: auto;
    margin: 0 auto;
    pointer-events: none;
}

/*  PC(가로가 넓은 화면)에서는 세로를 화면에 맞춰 한 눈에 전체가 보이게 한다.
    가로 100% 로 늘리면 1920px 화면에서 높이가 3,000px 가 넘어 아래가 잘렸다.      */
@media (min-width: 768px) {
    .sys_notice_img {
        width: auto;
        max-width: 100%;
        max-height: 100vh;
    }
}