미디어위키: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%;
    font-size: 90%;
    border: 1px solid #e0e0e0;
    background: #f9f9f9;
    border-collapse: collapse;
}

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

/* 헤더 행 공통 스타일 */
.infobox-header {
    text-align: center;
    font-weight: bold;
    color: #ffffff;
}

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

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

/**********************
 * 타입별 모디파이어
 *    - site: 유적정보
 *    - concept: 개념정보
 *    - heritage: 문화유산정보
 **********************/

/* 유적정보 (infobox-site) */
.infobox--site .infobox-table {
    border-color: #cfd7ff;
    background: #f7f8ff;
}
.infobox--site .infobox-header {
    background: #06046d;
}

/* 개념정보 (infobox-concept) */
.infobox--concept .infobox-table {
    border-color: #cfe8ff;
    background: #f7fbff;
}
.infobox--concept .infobox-header {
    background: #005a8c;
}

/* 문화유산정보 (infobox-heritage) */
.infobox--heritage .infobox-table {
    border-color: #e4cf8c;
    background: #fffaf0;
}
.infobox--heritage .infobox-header {
    background: #8c6a00;
}

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

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

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

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