미디어위키:Common.css

/* 이 CSS 설정은 모든 스킨에 적용됩니다 */

/**********************
 * 대문 문구 제거
 **********************/
body.page-대문 h1.firstHeading { 
	display: none; 
}

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

/**********************
 * 메인 화면 레이아웃
 **********************/
 /* 메인 상단 영역 */
.main-header {
  text-align: center;
  margin: 32px auto 24px;
}

/* 사이트 타이틀 */
.site-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* 부제 */
.site-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 50px;
}

/* 콘텐츠 영역 */
.main-content {
  margin-top: 50px;
  margin-bottom: 70px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

/* 전체 검색 박스 */
.search-box {
  max-width: 520px;
  margin: 24px auto;
  padding: 16px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fafafa;
}

/* 검색 범위 (라디오) */
.search-scope {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 14px;
}

.search-scope label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #555;
}

/* 라디오 버튼 기본 스타일 정리 */
.search-scope input[type="radio"] {
  accent-color: #3366cc; /* Vector 계열과 어울리는 색 */
}

/* 입력창 + 버튼 한 줄 */
.search-input-row {
  display: flex;
  gap: 8px;
}

/* 검색 입력창 */
.search-input-row input[type="search"] {
  flex: 1;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 검색 버튼 */
.search-input-row button {
  padding: 8px 14px;
  font-size: 14px;
  background-color: #3366cc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-input-row button:hover {
  background-color: #254a99;
}

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

/* 인포박스 컨테이너: 기본은 본문 오른쪽 플로팅 */
.infobox {
    float: right;
    clear: right;          /* 같은 문서에서 여러 개일 때 세로로 차곡차곡 */
    width: 300px;
    margin: 5px 0 10px 15px;
    border: 1px dotted #9b9b9b;
    background: #f9f9f9;
    padding: 4px;
    box-sizing: border-box;
}

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

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

.infobox-table {
    width: 100%;
    table-layout: fixed;
    font-size: 90%;
    border-collapse: separate;
    border-spacing: 5px;
}

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

/* 인포박스 캡션(제목) */
.infobox-caption {
    caption-side: top;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    padding: 4px 6px;
    border-radius: 3px;
}

/* 왼쪽 라벨 셀 */
.infobox-label {
    width: 30%;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

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

/* 서브헤더 행 공통 스타일 */
.infobox-subheader {
    background: #eaeaea;
    border-radius: 3px;
}

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

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

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

/* 용어정보 (infobox--term) */
.infobox--term .infobox-table {
    background: #fffaf0;
}
.infobox--term .infobox-caption {
    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;   /* 연한 파란색 강조 */
}

.listtable .col-type {
    width: 100px;
    white-space: nowrap;
}

/* ============================
   [[파일:..]] 메타정보 틀 스타일
   ============================ */
.fileinfo-table {
    width: 100%;
    border-collapse: collapse;
    background: #fafafa;
    border: 1px solid #dcdcdc;
    margin: 1em 0;
    font-size: 95%;
}

/* 셀 스타일 */
.fileinfo-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: top;
}

/* 왼쪽 컬럼 (필드 이름) */
.fileinfo-table .fileinfo-paramfield {
    width: 140px;
    font-weight: bold;
    background: #f0f0f0;
    border-right: 1px solid #dcdcdc;
}

/* 마지막 줄에서는 아래쪽 테두리 제거 */
.fileinfo-table tr:last-child td {
    border-bottom: none;
}

/* 캡션(description) 스타일 보완 */
.fileinfo-table .description {
    line-height: 1.5em;
}


/**********************
 * 링크 색상 조정
 **********************/
/* 존재하지 않는 문서 (redlink) */
.mw-parser-output a.new {
    color: inherit;
}


/**********************
 * 모바일 대응 (스마트폰·좁은 화면)
 **********************/
@media screen and (max-width: 768px) {
    /**********************
     * 검색 UI 모바일 대응
     **********************/
    /* 검색 박스 전체 폭 사용 */
    .search-box {
        max-width: 100%;
        margin: 12px 0;
        padding: 12px;
    }

    /* 라디오 버튼 영역 */
    .search-scope {
        flex-wrap: wrap;          /* 화면 좁으면 자동 줄바꿈 */
        gap: 10px;
        font-size: 13px;
    }

    /* 입력창 + 버튼 세로 정렬 */
    .search-input-row {
        flex-direction: column;
        gap: 8px;
    }

    /* 입력창 */
    .search-input-row input[type="search"] {
        width: 100%;
        font-size: 16px;          /* 모바일 키보드 확대 방지 */
    }

    /* 검색 버튼 */
    .search-input-row button {
        width: 100%;
        font-size: 15px;
        padding: 10px;
    }

    /**********************
     * 본문 모바일 대응
     **********************/
    /* 모바일에서는 플로팅을 풀고 본문 폭에 맞춰 위쪽에 배치 */
    .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;
    }
}