미디어위키:Common.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */

/**********************
 * 자동 생성 <p><br></p> 공백 처리
 **********************/
 /* p 안에 br 하나만 있을 때 br 숨기기 */
.mw-parser-output > p > br:only-child {
    display: none;
}

/**********************
 * 공통 인포박스 레이아웃
 **********************/

/* 인포박스 컨테이너: 기본은 본문 오른쪽 플로팅 */
.infobox {
    float: right;
    clear: right;          /* 같은 문서에서 여러 개일 때 세로로 차곡차곡 */
    width: 300px;
    margin: 5px 0 10px 15px;
}

/* 바로 뒤에 또 다른 인포박스가 올 때 간격만 살짝 조정 */
.infobox + .infobox {
    margin-top: 5px;
}

/**********************
 * 공통 테이블/셀 스타일
 **********************/

.infobox-table {
    width: 100%;
    table-layout: fixed;
    font-size: 90%;
    background: #f9f9f9;
    border: 1px dotted #9b9b9b;
    border-collapse: separate;
    border-spacing: 5px;
}

.infobox-table th,
.infobox-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
}

/* 헤더 행 공통 스타일 */
.infobox-header {
    display: table-cell;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    border-radius: 3px;
}

.infobox-subheader {
    background: #eaeaea;
}

/* 왼쪽 라벨 셀 */
.infobox-label {
    width: 30%;
    text-align: center;
    white-space: nowrap;
}

/* 오른쪽 데이터 셀 */
.infobox-data {
    width: 70%;
    text-align: left;
}

/**********************
 * 타입별 모디파이어
 *    - site: 유적정보
 *    - concept: 개념정보
 *    - term: 용어정보
 **********************/

/* 유적정보 (infobox--site) */
.infobox--site .infobox-table {
    background: #f7fbff;
}
.infobox--site .infobox-header {
    background: #ce4400;
}

/* 개념정보 (infobox--concept) */
.infobox--concept .infobox-table {
    background: #f7fbff;
}
.infobox--concept .infobox-header {
    background: #0071b9;
}

/* 용어정보 (infobox--term) */
.infobox--term .infobox-table {
    background: #fffaf0;
}
.infobox--term .infobox-header {
    background: #8c6a00;
}

/************************
 * 리스트형 정보 박스 공통
 *  - 예: 조사정보, 문헌목록 등
 ************************/

/* 리스트 박스 컨테이너 */
.listbox {
    clear: both;             /* 우측 infobox 아래에서 시작하도록 */
    margin: 20px 0;
}

/* 리스트 박스 제목 */
.listbox-title {
    font-weight: bold;
    margin-bottom: 6px;
}

/* 공통 테이블 스타일 */
.listbox-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    background: #ffffff;
}

/* 셀 공통 */
.listbox-table th,
.listbox-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: top;
}

/* 헤더 행 */
.listbox-table th {
    background: #f5f5f5;
    text-align: left;
    font-weight: bold;
}

/* 짝수 행에 옅은 배경 (가독성) */
.listbox-table tr:nth-child(even) {
    background: #fafafa;
}

/***************
 * 타입별 모디파이어
 *  - survey: 조사정보
 *  - 이후에 term-list, ref-list 등 추가 가능
 ***************/

/* 조사정보용 */
.listbox--survey .listbox-title {
    color: #444444;
}

.listbox--survey .listbox-table thead th {
    background: #fff3d6;
    border-bottom-color: #f0c56b;
}







/**********************
 * 모바일 대응 (스마트폰·좁은 화면)
 **********************/
@media screen and (max-width: 768px) {

    /* 모바일에서는 플로팅을 풀고 본문 폭에 맞춰 위쪽에 배치 */
    .infobox {
        float: none;
        clear: both;
        width: auto;
        max-width: 100%;
        margin: 0 0 10px 0;   /* 좌우 여백 제거, 아래만 여백 */
    }

    .infobox-table {
    	width: 100%;
        font-size: 95%;		/* 모바일에서는 글자를 조금 키워도 됨 */
        table-layout: fixed;
    }

    /* 좁은 화면에서는 라벨 줄바꿈 허용 */
    .infobox-label {
        white-space: normal;
    }


    .listbox-table {
        font-size: 90%;
        table-layout: fixed;
        width: 100%;
        display: block;
        overflow-x: auto;     /* 좁은 화면에서 가로 스크롤 허용 */
    }

    .listbox-table th,
    .listbox-table td {
        word-break: break-word;
    }
}