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

2025년 8월 31일 (일) 01:58 판

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

/* Monochrome for Timeless */
body.skin-timeless .mw-header,
body.skin-timeless .mw-footer,
body.skin-timeless .site-header,
body.skin-timeless .sidebar { background:#f7f7f7 !important; border-color:#e5e5e5 !important; }

body.skin-timeless .mw-parser-output a,
body.skin-timeless a { color:#222 !important; }
body.skin-timeless a:visited { color:#555 !important; }
body.skin-timeless a:hover, body.skin-timeless a:focus { color:#000 !important; }

body.skin-timeless .mw-ui-button,
body.skin-timeless .mw-ui-button.mw-ui-progressive,
body.skin-timeless .mw-ui-button.mw-ui-destructive {
  background:#e6e6e6 !important; color:#111 !important; border-color:#cfcfcf !important;
}

body.skin-timeless .mw-message-box,
body.skin-timeless .mw-message-box-warning,
body.skin-timeless .mw-message-box-error,
body.skin-timeless .mw-message-box-success {
  background:#f3f3f3 !important; border-color:#dcdcdc !important; color:#111 !important;
}

body.skin-timeless input, body.skin-timeless select, body.skin-timeless textarea {
  background:#fff !important; color:#111 !important; border-color:#dcdcdc !important;
}

/* Vector 2022: 로고 아이콘 숨기고(작은 로고), 워드마크/텍스트만 표시 */
.skin-vector-2022 .mw-logo-icon,
.skin-vector-2022 .vector-sticky-header-logo { display: none !important; }

/* 여백 정리 (선택) */
.skin-vector-2022 .mw-logo-wordmark { margin-left: 0 !important; }

/* 배경(히어로) 영역 */
.main-hero {
  position: relative;
  padding: 48px 16px;            /* 위아래 여백 */
  background: linear-gradient(180deg,#0f1220 0%, #171b29 100%); /* 배경색/그라데이션 */
}

/* 배경 이미지를 쓰고 싶다면(선택) — 이미지 경로만 바꾸면 됩니다 */
.main-hero {
  background: url(/images/site/hero.jpg) center/cover no-repeat fixed;
}

/* 가운데 카드 박스(본문) */
.main-card {
  max-width: 980px;              /* 카드 최대 가로 폭 */
  margin: 0 auto;                /* 가운데 정렬 */
  background: #fff;              /* 박스 배경색(라이트) */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 28px;
}

/* 다크 모드 대응(선택) */
@media (prefers-color-scheme: dark) {
  .main-card {
    background: #161a22;
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
  }
}

/* 반응형(선택) — 모바일은 여백만 살짝 줄이기 */
@media (max-width: 720px) {
  .main-hero { padding: 28px 12px; }
  .main-card { padding: 20px; border-radius: 12px; }
}