미디어위키:Mobile.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
• 오페라: Ctrl-F5를 입력.

/* 여기의 모든 CSS는 모바일 사이트를 사용하는 사용자에게 로드됩니다 */



/* 표 전체가 화면을 넘어가지 않도록 설정 */
.mw-collapsible {
    width: 100% !important;
    max-width: 100%;
    text-align: left;
    background: #f9f4e6;
    border: 1px solid #0a0a0a;
    padding: 10px;
    font-size: 16px;
    word-wrap: break-word; /* 줄바꿈 적용 */
    overflow-wrap: break-word; /* 긴 단어 줄바꿈 */
}

/* 표 내부의 텍스트도 자동 줄바꿈 */
.mw-collapsible td, .mw-collapsible th {
    word-break: break-word; /* 단어가 길면 강제 줄바꿈 */
    white-space: normal !important; /* 텍스트가 잘리지 않고 자동 줄바꿈 */
    overflow-wrap: break-word;
}

/* <poem> 태그도 줄바꿈 적용 */
.mw-collapsible poem {
    display: block;
    white-space: normal !important; /* 자동 줄바꿈 */
    word-break: break-word;
}

/* 모바일 화면에서 표를 넘지 않도록 조정 */
@media screen and (max-width: 768px) {
    .mw-collapsible {
        display: block !important;
        overflow-x: hidden; /* 강제로 가로 스크롤 막음 */
    }
    .mw-collapsible table {
        display: block;
        width: 100%;
        table-layout: fixed; /* 표 크기를 강제로 맞춤 */
        word-break: break-word;
    }
}