미디어위키:Common.css: 두 판 사이의 차이

2025년 10월 27일 (월) 16:32 판

/****************************************************
 * KDMW — Site-wide Common.css (safe, content-scoped)
 * - 가급적 본문(.mw-parser-output) 범위로만 스타일 적용
 * - 스킨(툴바/검색창/사이드바) UI는 건드리지 않음
 ****************************************************/

/* -------- CSS 변수(전체 공통 토큰) -------- */
:root{
  --kdmw-accent: #0ea5e9;       /* 포인트 */
  --kdmw-muted:  #e5e7eb;       /* 연한 경계 */
  --kdmw-text:   #111827;       /* 본문 텍스트 */
  --kdmw-link:   #111827;       /* 링크 */
  --kdmw-link-visited:#6f42c1;  /* 방문 링크 */
  --kdmw-bg-soft:#fdfdfd;       /* 카드 배경 */
  --kdmw-radius: 12px;          /* 둥근 모서리 */
  --kdmw-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06);
}

/* -------- 본문 기본 -------- */
.mw-parser-outp{
  line-height: 1.65;
}

/* 링크 */
.mw-parser-output a{
  
  text-decoration: none;
}

.mw-parser-output a:hover,
.mw-parser-output a:focus{ text-decoration: underline; }

/* 제목 */
.mw-parser-output h1{ margin: 1.2rem 0 .8rem; }
.mw-parser-output h2{
  margin: 1.8rem 0 .6rem;
  padding-bottom: .25rem;
  
}
.mw-parser-output h3{ margin: 1.2rem 0 .4rem; }

/* -------- 포털/인덱스용 목록 카드화 --------
   h2 바로 아래 1단 목록을 '카드'처럼 보이게 */
.mw-parser-output > h2 + ul{
  list-style: none;
  margin: .6rem 0 1.2rem 0;
  padding: 0;
}
.mw-parser-output > h2 + ul > li{
;
  
  border-radius: var(--kdmw-radius);
  
  padding: .8rem 1rem;
  margin: .6rem 0;
}
/* 2단 목록은 왼쪽 라인으로 계층감 */
.mw-parser-output > h2 + ul > li > ul{
  margin-top: .5rem;
  padding-left: .9rem;
}
/* 3단은 점선으로 더 가볍게 */
.mw-parser-output ul ul ul{

}

/* 링크 강조(목록 안 첫 링크 가독성) */
.mw-parser-output li > a{ font-weight: 600; }

/* -------- 표(위키테이블) 품질 향상 -------- */
.mw-parser-output .wikitable{
  border-collapse: collapse;
  
}
.mw-parser-output .wikitable th,
.mw-parser-output .wikitable td{
    padding: .5rem .6rem;
}
.mw-parser-output .wikitable th{
  
  font-weight: 700;
}
.mw-parser-output .wikitable tr:nth-child(even){
  
}
.mw-parser-output .wikitable caption{
  caption-side: top;
  padding: .4rem 0 .6rem;
  font-weight: 700;
}

/* -------- 정보박스/네브박스(있다면) -------- */
.mw-parser-output .infobox,
.mw-parser-output table.infobox{
 
  border-radius: var(--kdmw-radius);
  overflow: hidden;
}
.mw-parser-output .navbox,
.mw-parser-output table.navbox{
 
}

/* -------- 목차(TOC) -------- */
.mw-parser-output .toc{
 
  border-radius: var(--kdmw-radius);
  background: #fff;
  box-shadow: var(--kdmw-shadow);
}

/* -------- 유틸리티 클래스(문서에서 선택 적용) -------- */
/* 다열 목록 */
.mw-parser-output .cols-2{ columns: 2; column-gap: 2rem; }
.mw-parser-output .cols-3{ columns: 3; column-gap: 2rem; }
.mw-parser-output .cols-2 > *,.mw-parser-output .cols-3 > *{ break-inside: avoid; }

/* 카드/박스 */
.mw-parser-output .card{
  border: 1px solid #ededed;
  border-radius: var(--kdmw-radius);
  padding: 1rem;
  
}
/* 콜아웃 */
.mw-parser-output .note{ border-left: 4px solid #10b981; background:#ecfdf5; padding:.75rem 1rem; }
.mw-parser-output .warn{ border-left: 4px solid #f59e0b; background:#fffbeb; padding:.75rem 1rem; }

/* 키보드 키 표시 */
.mw-parser-output kbd{
  background: #111827;
  color: #fff;
  padding: .12rem .4rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
}

/* -------- 접근성 & 반응형 -------- */
@media (max-width: 720px){
  .mw-parser-output .cols-3{ columns: 2; }
  .mw-parser-output .cols-2{ columns: 1; }
  .mw-parser-output > h2 + ul > li{ padding: .75rem .85rem; }
}

/* -------- (옵션) 특정 페이지만 포털 강조하려면
   body.page-페이지_제목 스코프로 추가 규칙 작성 -------- */
/* 예시:
body.page-국민대학교_조형대학_조형전_50주년_기획 .mw-parser-output > h2 + ul > li{
  border-color: #cdeafe;
  background: #f0f9ff;
}
*/

/* 전체 배경 & 경계 */
body.skin-vector-2022 .vector-sidebar{
  background: #f8fafc;
  border-right: 1px solid #e5e7eb;
}

/* 포틀릿(섹션) 제목 */
body.skin-vector-2022 .vector-sidebar .vector-menu .vector-menu-heading{
  font-weight: 700;
  font-size: .95rem;
  color: #111827;
  padding: .6rem .75rem .3rem;
}

/* 링크 기본/호버/활성(현재 페이지) */
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list > li > a{
  display: block;
  padding: .35rem .6rem;
  border-radius: 8px;
  text-decoration: none;
}
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list > li > a:hover,
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list > li > a:focus{
  background: #eef6ff;
}
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list > li > a.mw-selflink{
  background: #dbeafe;
  font-weight: 700;
}
/* 카드 그리드 컨테이너 */
.mw-parser-output .cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: .8rem 0 1.2rem;
}
/* 카드 내부 타이틀 */
.mw-parser-output .card .card-title{
  font-weight: 700;
  margin-bottom: .4rem;
}
/* 카드 내부 목록은 기본 스타일 유지(겹침 방지) */
.mw-parser-output .card ul{ 
  margin: .4rem 0 0; 
  padding-left: 1rem; 
  list-style: disc;
  border-left: 0;
}
.mw-parser-output .card ul li{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: .25rem 0;
}

/* 카드 상단 커버 이미지 */
.mw-parser-output .card{ position: relative; }
.mw-parser-output .card-cover{
  /* 카드 바깥 여백 없이 '풀-블리드'로 보이게 */
  margin: -1rem -1rem .75rem;         /* .card에 padding:1rem 기준 */
  border-top-left-radius: var(--kdmw-radius);
  border-top-right-radius: var(--kdmw-radius);

  overflow: hidden;
  background: #e5e7eb;                /* 로딩/플레이스홀더 배경 */
  aspect-ratio: 20/9;                 /* 비율 유지 (원하면 4/3, 3/1 등) */
  position: relative;
}
/* 미디어위키가 만들어주는 <a class="image"><img></a> 대응 */
.mw-parser-output .card-cover .image,
.mw-parser-output .card-cover img{
  display: block;
  width: 100%;
  height: 100%;
}
.mw-parser-output .card-cover img{
  object-fit: cover;                   /* 중앙 크롭 */
  height: 100%;
}

.mw-parser-output .card-cover figure[typeof~='mw:File'].mw-halign-center,figure[typeof~='mw:File/Frameless'].mw-halign-center {
  position: absolute;
  width: 100%;
  height: 100%; 
}

body.skin--responsive .mw-parser-output .card-cover figure img.mw-file-element {
  height: 100%;
}

.mw-parser-output .card-text a {
  color: #666;
}

.mw-parser-output .card-cover-full{
  border-top-left-radius: var(--kdmw-radius);
  border-top-right-radius: var(--kdmw-radius);
  border-bottom-right-radius: var(--kdmw-radius);
  border-bottom-left-radius: var(--kdmw-radius);
  overflow: hidden;
  background: #e5e7eb;                /* 로딩/플레이스홀더 배경 */
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.mw-parser-output .card-cover-full figure {
  position: absolute; width: 100%; height: 100%;
}

.mw-parser-output .card-cover-full figure a {
  position: absolute; width: 100%; height: 100%;
}

body.skin--responsive .mw-parser-output .card-cover-full figure img.mw-file-element {
  position: absolute; width: 100%; height: 100%; object-fit: cover;
}

.mw-parser-output .card-text-full {
  border-top-left-radius: var(--kdmw-radius);
  border-top-right-radius: var(--kdmw-radius);
  border-bottom-right-radius: var(--kdmw-radius);
  border-bottom-left-radius: var(--kdmw-radius);
  overflow: hidden;
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.mw-parser-output .card-text-full a {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  box-sizing: border-box; padding: .6rem;
}

.mw-parser-output .card-title-full {
  font-size: 1.4em;
}

.mw-parser-output .card-full-img {
  min-height: 10rem;
}

.mw-parser-output .card-thumb {
  display: flex; gap: 1rem;
}

.mw-parser-output .card-thumb .thumb {
  border-top-left-radius: var(--kdmw-radius);
  border-top-right-radius: var(--kdmw-radius);
  border-bottom-right-radius: var(--kdmw-radius);
  border-bottom-left-radius: var(--kdmw-radius);
  overflow: hidden;
  aspect-ratio: 1/1; 
  position: relative;
  width: 4.5rem;
}

.mw-parser-output .card-thumb .thumb {
  flex-shrink: 0;
}
.mw-parser-output .card-thumb .thumb figure {
  position: absolute; width: 100%; height: 100%;
}

.mw-parser-output .card-thumb .thumb figure a {
  position: absolute; width: 100%; height: 100%;
}

body.skin--responsive .mw-parser-output .thumb figure img.mw-file-element {
    position: absolute; width: 100%; height: 100%; object-fit: cover;
}

.mw-parser-output .card-thumb .txt {
  flex: 1; min-width: 0;
}
.mw-parser-output .card-thumb .txt a {
  
  font-size: var(--font-size-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mw-parser-output .card-thumb .txt .title {
  font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mw-parser-output .card-thumb .txt .cons{
  color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mw-parser-output .card-img{
  margin: -1rem -1rem .75rem;
  border-top-left-radius: var(--kdmw-radius);
  border-top-right-radius: var(--kdmw-radius);
  overflow: hidden;
  background: #e5e7eb;
  position: relative;
  height: 10rem;
}

.mw-parser-output .card-img figure {
  position: absolute; width: 100%; height: 100%;
}

body.skin--responsive .mw-parser-output .card-img figure img.mw-file-element {
  position: absolute; width: 100%; height: 100%; object-fit: cover;
}

.mw-parser-output .card-txt > a { font-weight: bold; }

.tl-timeline .tl-slide-title { font-weight: bold; color: #333; }
.tl-timeline .tl-text-content { font-size: 14px; line-height: 1.5; }