미디어위키:Common.css

/* 이 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: 10%;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word;
    text-align: center;
}

/* 오른쪽 데이터 셀 */
.infobox-data {
    width: 90%;
    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;
}




/**********************
 * 공통 리스트형 표 스타일
 **********************/

/* 공통 리스트형 표 스타일 */
table.listtable {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.9rem;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
}

/* 헤더 셀 */
table.listtable th {
    background: #f5f5f5;
    color: #333333;
    font-weight: bold;
    padding: 8px 10px;
    border-bottom: 1px solid #d0d0d0;
    text-align: left;
    white-space: nowrap;
}

/* 일반 셀 */
table.listtable td {
    padding: 6px 10px;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: top;
}

/* 행 호줄무늬 */
table.listtable tr:nth-child(even) td {
    background: #fafafa;
}

/* 마지막 행 경계 삭제 */
table.listtable tr:last-child td {
    border-bottom: none;
}

/* 마우스 hover 시 행 강조 */
table.listtable tbody tr:hover td {
    background-color: #f0f7ff !important;   /* 연한 파란색 강조 */
}

/**********************
 * 모바일 대응 (스마트폰·좁은 화면)
 **********************/
@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;
    }

    table.listtable {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    table.listtable th,
    table.listtable td {
        white-space: nowrap;
        word-break: keep-all;
    }
}