|
|
| 1번째 줄: |
1번째 줄: |
| /* 이 CSS 설정은 모든 스킨에 적용됩니다 */ | | /* 이 CSS 설정은 모든 스킨에 적용됩니다 */ |
|
| |
| /* 1) TOC를 왼쪽 사이드처럼 보이게 */
| |
| body.skin-vector-2022 #toc,
| |
| body.skin-vector-2022 .toc {
| |
| float: left;
| |
| width: 220px;
| |
| margin: 0 16px 16px 0;
| |
| padding: 10px;
| |
| border: 0;
| |
| background: transparent;
| |
| font-size: inherit;
| |
| }
| |
|
| |
| /* TOC 제목(목차) 스타일 최소화 */
| |
| body.skin-vector-2022 #toc .toctitle,
| |
| body.skin-vector-2022 .toc .toctitle {
| |
| text-align: left;
| |
| margin: 0 0 6px 0;
| |
| }
| |
|
| |
| /* 2) 인포박스 클래스: 오른쪽 고정 + 무장식 */
| |
| body.skin-vector-2022 table.infobox-namu {
| |
| float: right;
| |
| width: 320px;
| |
| margin: 0 0 16px 16px;
| |
| border: 0;
| |
| background: transparent;
| |
| font-size: inherit;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu th,
| |
| body.skin-vector-2022 table.infobox-namu td {
| |
| border: 0;
| |
| background: transparent;
| |
| padding: 2px 0;
| |
| vertical-align: top;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu th {
| |
| font-weight: 700;
| |
| text-align: left;
| |
| padding-right: 10px;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| /* 인포박스 제목 줄 */
| |
| body.skin-vector-2022 table.infobox-namu .infobox-title {
| |
| text-align: center;
| |
| font-weight: 800;
| |
| padding: 4px 0 10px 0;
| |
| }
| |
|
| |
| /* 3) mw-collapsible(접기) 스타일: 테두리/배경 제거 */
| |
| body.skin-vector-2022 table.mw-collapsible,
| |
| body.skin-vector-2022 table.mw-collapsible th,
| |
| body.skin-vector-2022 table.mw-collapsible td {
| |
| border: 0 !important;
| |
| background: transparent !important;
| |
| padding-left: 0 !important;
| |
| padding-right: 0 !important;
| |
| }
| |
|
| |
| /* 4) 접기 토글을 제목 왼쪽으로 */
| |
| body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle {
| |
| float: left;
| |
| margin: 0 8px 0 0;
| |
| font-size: inherit;
| |
| line-height: inherit;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle a {
| |
| text-decoration: none;
| |
| font-weight: 700;
| |
| color: inherit;
| |
| background: none;
| |
| border: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| /* 5) 모바일에서는 TOC/인포박스 float 해제(깨짐 방지) */
| |
| @media (max-width: 720px) {
| |
| body.skin-vector-2022 #toc,
| |
| body.skin-vector-2022 .toc {
| |
| float: none;
| |
| width: auto;
| |
| margin: 0 0 12px 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 12px 0;
| |
| }
| |
| }
| |
|
| |
| /* =========================================================
| |
| - Typography / spacing
| |
| - Links
| |
| - Headings
| |
| - TOC left box
| |
| - Infobox right
| |
| - Collapsible look
| |
| ========================================================= */
| |
|
| |
| body.skin-vector-2022 .mw-body-content {
| |
| font-size: 15px;
| |
| line-height: 1.75;
| |
| }
| |
|
| |
| /* 문단/목록 간격 */
| |
| body.skin-vector-2022 .mw-parser-output p { margin: 0.65em 0; }
| |
| body.skin-vector-2022 .mw-parser-output ul,
| |
| body.skin-vector-2022 .mw-parser-output ol { margin: 0.6em 0 0.9em 1.2em; }
| |
| body.skin-vector-2022 .mw-parser-output li { margin: 0.15em 0; }
| |
|
| |
| /* 제목 간격/굵기 */
| |
| body.skin-vector-2022 .mw-parser-output h1,
| |
| body.skin-vector-2022 .mw-parser-output h2,
| |
| body.skin-vector-2022 .mw-parser-output h3,
| |
| body.skin-vector-2022 .mw-parser-output h4 {
| |
| font-weight: 700;
| |
| border-bottom: none;
| |
| }
| |
|
| |
| body.skin-vector-2022 .mw-parser-output h1 { font-size: 1.6em; margin: 1.0em 0 0.55em; }
| |
| body.skin-vector-2022 .mw-parser-output h2 { font-size: 1.35em; margin: 1.1em 0 0.55em; }
| |
| body.skin-vector-2022 .mw-parser-output h3 { font-size: 1.15em; margin: 0.95em 0 0.5em; }
| |
| body.skin-vector-2022 .mw-parser-output h4 { font-size: 1.05em; margin: 0.85em 0 0.45em; }
| |
|
| |
| /* 링크 색/hover */
| |
| body.skin-vector-2022 .mw-parser-output a {
| |
| text-decoration: none;
| |
| }
| |
| body.skin-vector-2022 .mw-parser-output a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* =========================================================
| |
| TOC (목차) - 왼쪽 박스형
| |
| ========================================================= */
| |
| body.skin-vector-2022 #toc,
| |
| body.skin-vector-2022 .toc {
| |
| float: left;
| |
| width: 230px;
| |
| margin: 0 16px 16px 0;
| |
| padding: 10px 12px;
| |
| border: 1px solid rgba(0,0,0,0.08);
| |
| border-radius: 6px;
| |
| background: rgba(0,0,0,0.02);
| |
| font-size: 0.95em;
| |
| }
| |
|
| |
| body.skin-vector-2022 #toc .toctitle,
| |
| body.skin-vector-2022 .toc .toctitle {
| |
| text-align: left;
| |
| margin: 0 0 8px 0;
| |
| }
| |
| body.skin-vector-2022 #toc .toctitle h2,
| |
| body.skin-vector-2022 .toc .toctitle h2 {
| |
| font-size: 1.0em;
| |
| font-weight: 800;
| |
| margin: 0;
| |
| }
| |
|
| |
| /* 목차 번호/들여쓰기 정리 */
| |
| body.skin-vector-2022 #toc ul,
| |
| body.skin-vector-2022 .toc ul {
| |
| margin: 0;
| |
| padding-left: 1.1em;
| |
| }
| |
| body.skin-vector-2022 #toc li,
| |
| body.skin-vector-2022 .toc li { margin: 0.15em 0; }
| |
|
| |
| /* =========================================================
| |
| Infobox (오른쪽)
| |
| 문서에서 class="infobox-namu" 사용
| |
| ========================================================= */
| |
| body.skin-vector-2022 table.infobox-namu {
| |
| float: right;
| |
| width: 330px;
| |
| margin: 0 0 16px 16px;
| |
| border: 1px solid rgba(0,0,0,0.08);
| |
| border-radius: 8px;
| |
| background: rgba(0,0,0,0.01);
| |
| border-collapse: separate;
| |
| overflow: hidden;
| |
| font-size: 0.95em;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu th,
| |
| body.skin-vector-2022 table.infobox-namu td {
| |
| border: 0;
| |
| background: transparent;
| |
| padding: 6px 10px;
| |
| vertical-align: top;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu th {
| |
| width: 92px;
| |
| font-weight: 700;
| |
| white-space: nowrap;
| |
| opacity: 0.9;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu .infobox-title {
| |
| text-align: center;
| |
| font-weight: 900;
| |
| font-size: 1.05em;
| |
| padding: 10px 10px 6px;
| |
| background: rgba(0,0,0,0.03);
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu .infobox-image {
| |
| text-align: center;
| |
| padding: 6px 10px 10px;
| |
| }
| |
|
| |
| /* =========================================================
| |
| Collapsible (mw-collapsible)
| |
| ========================================================= */
| |
|
| |
| /* 표 특유 배경/테두리 제거(접기 전용 표) */
| |
| body.skin-vector-2022 table.mw-collapsible,
| |
| body.skin-vector-2022 table.mw-collapsible th,
| |
| body.skin-vector-2022 table.mw-collapsible td {
| |
| border: 0 !important;
| |
| background: transparent !important;
| |
| }
| |
|
| |
| /* 토글을 제목 왼쪽으로 */
| |
| body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle {
| |
| float: left;
| |
| margin: 0 8px 0 0;
| |
| font-size: inherit;
| |
| line-height: inherit;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle a {
| |
| text-decoration: none;
| |
| font-weight: 800;
| |
| color: inherit;
| |
| }
| |
|
| |
| /* 접기 헤더(!)를 ‘본문 제목 줄’처럼 보이게 */
| |
| body.skin-vector-2022 table.mw-collapsible > tbody > tr:first-child > th {
| |
| text-align: left;
| |
| font-weight: 700;
| |
| padding: 0; /* 장식 최소화 */
| |
| }
| |
|
| |
| /* 접기 내용(td) 여백 */
| |
| body.skin-vector-2022 table.mw-collapsible > tbody > tr:nth-child(2) > td {
| |
| padding: 6px 0 10px 0;
| |
| }
| |
|
| |
| /* =========================================================
| |
| Quotes / Code blocks - 과한 스타일 제거
| |
| ========================================================= */
| |
| body.skin-vector-2022 blockquote {
| |
| margin: 0.8em 0;
| |
| padding: 0.6em 0.9em;
| |
| border-left: 4px solid rgba(0,0,0,0.12);
| |
| background: rgba(0,0,0,0.02);
| |
| }
| |
|
| |
| body.skin-vector-2022 pre,
| |
| body.skin-vector-2022 code {
| |
| font-size: 0.95em;
| |
| }
| |
|
| |
| /* =========================================================
| |
| Mobile safety: float 해제
| |
| ========================================================= */
| |
| @media (max-width: 720px) {
| |
| body.skin-vector-2022 #toc,
| |
| body.skin-vector-2022 .toc {
| |
| float: none;
| |
| width: auto;
| |
| margin: 0 0 12px 0;
| |
| }
| |
|
| |
| body.skin-vector-2022 table.infobox-namu {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 12px 0;
| |
| }
| |
| }
| |