미디어위키:Gadget-Vector.css: 두 판 사이의 차이

식물 vs 좀비 위키
둘러보기로 이동 검색으로 이동
편집 요약 없음
태그: 되돌려진 기여
Brokey (토론)의 350 판 편집을 되돌림
태그: 편집 취소
1번째 줄: 1번째 줄:
/* 제목용 장식 글꼴 — 불러오기가 차단되면 기본 글꼴로 자동 대체된다. */
/*
@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");
* Vector 2010 인터페이스 디자인
* 적용 위치: 미디어위키:Gadget-vector.css
*
* 기존 UI의 배치·크기·기능은 유지하고
* 배경, 색상, 테두리, 그림자와 상태 표현만 변경한다.
*/




/* 기본 색상 — 한낮의 앞마당 */
/* 기본 색상 */
body.skin-vector-legacy {
body.skin-vector-legacy {
--pvz-ui-font-display:
"Jua", "BM JUA", "BMJUA",
"NanumSquareRound", sans-serif;
--pvz-ui-background-image:
--pvz-ui-background-image:
url("/wiki/Special:Redirect/file/Wiki_Bg_Light.png");
url("/wiki/Special:Redirect/file/Wiki_Bg_Light.png");


--pvz-ui-overlay-top:
--pvz-ui-overlay-top:
rgba(183, 216, 121, 0.42);
rgba(247, 239, 231, 0.3);


--pvz-ui-overlay-bottom:
--pvz-ui-overlay-bottom:
rgba(56, 94, 32, 0.68);
rgba(232, 216, 205, 0.76);


--pvz-ui-page: #7cab46;
--pvz-ui-page: #eee3da;
--pvz-ui-page-deep: rgba(45, 76, 24, 0.8);
--pvz-ui-page-deep: rgba(224, 207, 196, 0.78);


--pvz-ui-surface:
--pvz-ui-surface:
rgba(255, 250, 229, 0.98);
rgba(255, 252, 249, 0.97);


--pvz-ui-surface-soft:
--pvz-ui-surface-soft:
rgba(249, 240, 208, 0.97);
rgba(248, 241, 236, 0.95);


--pvz-ui-surface-muted:
--pvz-ui-surface-muted:
rgba(240, 225, 182, 0.97);
rgba(235, 221, 212, 0.95);


--pvz-ui-surface-strong:
--pvz-ui-surface-strong:
rgba(227, 206, 153, 0.98);
rgba(220, 198, 185, 0.96);


--pvz-ui-border: #b58a52;
--pvz-ui-border: #c8aea1;
--pvz-ui-border-soft: rgba(141, 102, 52, 0.4);
--pvz-ui-border-soft: rgba(170, 137, 121, 0.38);
--pvz-ui-border-strong: #86602f;
--pvz-ui-border-strong: #9b7463;


--pvz-ui-accent: #5aa02f;
--pvz-ui-accent: #775145;
--pvz-ui-accent-hover: #6db63d;
--pvz-ui-accent-hover: #684238;
--pvz-ui-accent-active: #47821f;
--pvz-ui-accent-active: #56362d;
--pvz-ui-accent-soft: #e3f0c3;
--pvz-ui-accent-soft: #dec5b8;


--pvz-ui-text: #46381e;
--pvz-ui-text: #49362f;
--pvz-ui-text-muted: #7c6a44;
--pvz-ui-text-muted: #77635c;
--pvz-ui-heading: #2f6b1d;
--pvz-ui-heading: #3e2d27;


--pvz-ui-link: #3a7a1c;
--pvz-ui-link: #7c4439;
--pvz-ui-link-hover: #dd7c0c;
--pvz-ui-link-hover: #a14f40;
--pvz-ui-link-visited: #7a608e;
--pvz-ui-link-visited: #70516a;
--pvz-ui-redlink: #b1432f;


--pvz-ui-focus: #eaa32b;
--pvz-ui-focus: #ad6a57;
--pvz-ui-focus-ring: rgba(240, 173, 52, 0.32);


--pvz-ui-shadow:
--pvz-ui-shadow:
rgba(56, 42, 12, 0.18);
rgba(72, 43, 34, 0.12);


--pvz-ui-shadow-strong:
--pvz-ui-shadow-strong:
rgba(48, 36, 10, 0.32);
rgba(72, 43, 34, 0.2);
 
--pvz-ui-inset-shadow:
rgba(93, 66, 24, 0.16);
 
--pvz-ui-sun: #ffd23f;
--pvz-ui-sun-soft: #ffe9a1;
 
--pvz-ui-hud-text: #fffbe4;
--pvz-ui-hud-shadow: rgba(38, 61, 16, 0.7);
--pvz-ui-hud-line: rgba(255, 250, 224, 0.35);
 
--pvz-ui-heading-glow:
rgba(255, 255, 255, 0.55);
 
--pvz-ui-btn-highlight:
rgba(255, 255, 255, 0.55);
 
--pvz-ui-btn-shade:
rgba(122, 86, 34, 0.2);
 
--pvz-ui-btn-edge: #9d7238;
--pvz-ui-btn-grad-top: #fffdf1;
--pvz-ui-btn-grad-bottom: #f0dfba;
--pvz-ui-btn-hover-top: #fff7d9;
--pvz-ui-btn-hover-bottom: #f8dc95;
 
--pvz-ui-tab-grad-top: #f9efd2;
--pvz-ui-tab-grad-bottom: #ead6a4;
 
--pvz-ui-primary-border: #40711d;
--pvz-ui-primary-edge: #35601a;
--pvz-ui-primary-grad-top: #8dc74d;
--pvz-ui-primary-grad-bottom: #55972a;
--pvz-ui-primary-hover-top: #9cd35b;
--pvz-ui-primary-hover-bottom: #61a634;
 
--pvz-ui-danger-border: #7e3123;
--pvz-ui-danger-edge: #6a281c;
--pvz-ui-danger-grad-top: #c7684f;
--pvz-ui-danger-grad-bottom: #9e3f2c;
 
--pvz-ui-table-header: #e6efc7;
 
--pvz-ui-selection-background: #ffe27a;
--pvz-ui-selection-text: #4a3510;


--pvz-ui-error-border: #b25341;
--pvz-ui-error-border: #b96860;
--pvz-ui-error-background: #fbe7de;
--pvz-ui-error-background: #f8e5e2;


--pvz-ui-warning-border: #cf9a37;
--pvz-ui-warning-border: #c29a5e;
--pvz-ui-warning-background: #fdf1d0;
--pvz-ui-warning-background: #f8eedc;


--pvz-ui-success-border: #6f9d45;
--pvz-ui-success-border: #849b76;
--pvz-ui-success-background: #ecf5d8;
--pvz-ui-success-background: #e9f1e5;


background-color: var(--pvz-ui-page);
background-color: var(--pvz-ui-page);
146번째 줄: 100번째 줄:
body.skin-vector-legacy a:focus {
body.skin-vector-legacy a:focus {
color: var(--pvz-ui-link-hover);
color: var(--pvz-ui-link-hover);
}
body.skin-vector-legacy a.new,
body.skin-vector-legacy a.new:visited {
color: var(--pvz-ui-redlink);
}
}


180번째 줄: 129번째 줄:




/* 본문창 — 연감 양피지 패널 */
/* 본문창 */
body.skin-vector-legacy #content,
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
body.skin-vector-legacy .mw-body {
188번째 줄: 137번째 줄:
color: var(--pvz-ui-text);
color: var(--pvz-ui-text);
box-shadow:
box-shadow:
0 8px 24px var(--pvz-ui-shadow),
0 5px 18px var(--pvz-ui-shadow),
inset 0 1px 0 var(--pvz-ui-btn-highlight);
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
}


205번째 줄: 154번째 줄:
body.skin-vector-legacy .mw-body-content h6,
body.skin-vector-legacy .mw-body-content h6,
body.skin-vector-legacy #firstHeading {
body.skin-vector-legacy #firstHeading {
font-family: var(--pvz-ui-font-display);
color: var(--pvz-ui-heading);
color: var(--pvz-ui-heading);
border-color: var(--pvz-ui-border);
border-color: var(--pvz-ui-border);
212번째 줄: 160번째 줄:
body.skin-vector-legacy #firstHeading {
body.skin-vector-legacy #firstHeading {
text-shadow:
text-shadow:
0 2px 0 var(--pvz-ui-heading-glow);
0 1px 0
rgba(255, 255, 255, 0.45);
}
}


222번째 줄: 171번째 줄:
drop-shadow(
drop-shadow(
0 3px 5px
0 3px 5px
rgba(30, 48, 12, 0.35)
rgba(65, 39, 31, 0.2)
);
);
}
}




/* 좌측 사이드바 — 정원 표지판 */
/* 좌측 사이드바 */
body.skin-vector-legacy #mw-panel {
body.skin-vector-legacy #mw-panel {
color: var(--pvz-ui-hud-text);
color: var(--pvz-ui-text);
}
}


236번째 줄: 185번째 줄:
#mw-panel
#mw-panel
.vector-menu-heading {
.vector-menu-heading {
font-family: var(--pvz-ui-font-display);
color: var(--pvz-ui-heading);
color: var(--pvz-ui-hud-text);
text-shadow:
text-shadow:
0 1px 3px var(--pvz-ui-hud-shadow);
0 1px 0
rgba(255, 255, 255, 0.42);
}
}


250번째 줄: 199번째 줄:
.vector-menu-content {
.vector-menu-content {
border: 1px solid var(--pvz-ui-border-soft);
border: 1px solid var(--pvz-ui-border-soft);
border-radius: 9px;
border-radius: 8px;
background: var(--pvz-ui-surface-soft);
background: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
text-shadow: none;
box-shadow:
box-shadow:
0 3px 8px
0 2px 8px
rgba(30, 46, 10, 0.18),
rgba(72, 43, 34, 0.07),
inset 0 1px 0 var(--pvz-ui-btn-highlight);
inset 0 1px 0
rgba(255, 255, 255, 0.42);
}
}


289번째 줄: 237번째 줄:




/* 상단 개인 메뉴 — HUD 텍스트 */
/* 상단 개인 메뉴 */
body.skin-vector-legacy #p-personal,
body.skin-vector-legacy #p-personal,
body.skin-vector-legacy #p-personal a,
body.skin-vector-legacy #p-personal li {
body.skin-vector-legacy #p-personal li {
color: var(--pvz-ui-hud-text);
color: var(--pvz-ui-text-muted);
text-shadow:
0 1px 3px var(--pvz-ui-hud-shadow);
}
 
body.skin-vector-legacy #p-personal a {
color: var(--pvz-ui-hud-text);
}
}


body.skin-vector-legacy #p-personal a:hover {
body.skin-vector-legacy #p-personal a:hover {
color: var(--pvz-ui-sun);
color: var(--pvz-ui-link-hover);
}
}


319번째 줄: 262번째 줄:




/* 기본 탭 — 나무 팻말 */
/* 기본 탭 */
body.skin-vector-legacy .vector-menu-tabs li,
body.skin-vector-legacy .vector-menu-tabs li,
body.skin-vector-legacy
body.skin-vector-legacy
325번째 줄: 268번째 줄:
li {
li {
border-color: var(--pvz-ui-border);
border-color: var(--pvz-ui-border);
border-radius: 9px 9px 0 0;
background-color: var(--pvz-ui-surface-muted);
background-color: var(--pvz-ui-surface-muted);
background-image:
background-image: none;
linear-gradient(
180deg,
var(--pvz-ui-tab-grad-top) 0%,
var(--pvz-ui-tab-grad-bottom) 100%
);
box-shadow:
inset 0 1px 0 var(--pvz-ui-btn-highlight);
transition:
transition:
background-color 0.14s ease,
background-color 0.14s ease,
351번째 줄: 286번째 줄:
background-image: none;
background-image: none;
text-shadow:
text-shadow:
0 1px 0 var(--pvz-ui-btn-highlight);
0 1px 0
rgba(255, 255, 255, 0.4);
}
}


361번째 줄: 297번째 줄:
li:hover {
li:hover {
background-color: var(--pvz-ui-accent-soft);
background-color: var(--pvz-ui-accent-soft);
background-image:
linear-gradient(
180deg,
var(--pvz-ui-btn-hover-top) 0%,
var(--pvz-ui-btn-hover-bottom) 100%
);
}
}




/* 선택된 탭 — 새싹 라인 */
/* 선택된 탭 */
body.skin-vector-legacy
body.skin-vector-legacy
.vector-menu-tabs
.vector-menu-tabs
380번째 줄: 310번째 줄:
background-color: var(--pvz-ui-surface);
background-color: var(--pvz-ui-surface);
background-image: none;
background-image: none;
box-shadow:
inset 0 3px 0 var(--pvz-ui-accent);
}
}


404번째 줄: 332번째 줄:
.vector-menu-heading {
.vector-menu-heading {
border-color: var(--pvz-ui-border);
border-color: var(--pvz-ui-border);
border-radius: 9px 9px 0 0;
background-color: var(--pvz-ui-surface-muted);
background-color: var(--pvz-ui-surface-muted);
background-image:
background-image: none;
linear-gradient(
180deg,
var(--pvz-ui-tab-grad-top) 0%,
var(--pvz-ui-tab-grad-bottom) 100%
);
color: var(--pvz-ui-link);
color: var(--pvz-ui-link);
text-shadow:
0 1px 0 var(--pvz-ui-btn-highlight);
box-shadow:
inset 0 1px 0 var(--pvz-ui-btn-highlight);
}
}


426번째 줄: 344번째 줄:
.vector-menu-heading:hover {
.vector-menu-heading:hover {
background-color: var(--pvz-ui-accent-soft);
background-color: var(--pvz-ui-accent-soft);
background-image:
linear-gradient(
180deg,
var(--pvz-ui-btn-hover-top) 0%,
var(--pvz-ui-btn-hover-bottom) 100%
);
color: var(--pvz-ui-link-hover);
color: var(--pvz-ui-link-hover);
}
}
444번째 줄: 356번째 줄:
.vector-menu-content {
.vector-menu-content {
border-color: var(--pvz-ui-border-strong);
border-color: var(--pvz-ui-border-strong);
border-radius: 9px;
border-radius: 7px;
background: var(--pvz-ui-surface);
background: var(--pvz-ui-surface);
box-shadow:
box-shadow:
0 7px 20px var(--pvz-ui-shadow-strong),
0 6px 18px
inset 0 1px 0 var(--pvz-ui-btn-highlight);
var(--pvz-ui-shadow-strong);
}
}


468번째 줄: 380번째 줄:
body.skin-vector-legacy .vector-search-box {
body.skin-vector-legacy .vector-search-box {
border-color: var(--pvz-ui-border-strong);
border-color: var(--pvz-ui-border-strong);
border-radius: 10px;
border-radius: 7px;
background-color: var(--pvz-ui-surface);
background-color: var(--pvz-ui-surface);
box-shadow:
box-shadow:
inset 0 2px 4px var(--pvz-ui-inset-shadow),
inset 0 1px 3px
0 1px 0 var(--pvz-ui-btn-highlight);
rgba(72, 43, 34, 0.09),
0 1px 0
rgba(255, 255, 255, 0.42);
transition:
transition:
border-color 0.16s ease,
border-color 0.16s ease,
495번째 줄: 409번째 줄:




/* 검색창 포커스 — 태양빛 링 */
/* 검색창 포커스 */
body.skin-vector-legacy
body.skin-vector-legacy
#simpleSearch:focus-within,
#simpleSearch:focus-within,
502번째 줄: 416번째 줄:
border-color: var(--pvz-ui-focus);
border-color: var(--pvz-ui-focus);
box-shadow:
box-shadow:
0 0 0 3px var(--pvz-ui-focus-ring),
0 0 0 2px
inset 0 2px 4px var(--pvz-ui-inset-shadow);
rgba(173, 106, 87, 0.18),
inset 0 1px 3px
rgba(72, 43, 34, 0.07);
}
}


512번째 줄: 428번째 줄:
body.skin-vector-legacy .searchButton {
body.skin-vector-legacy .searchButton {
border-color: var(--pvz-ui-border-strong);
border-color: var(--pvz-ui-border-strong);
border-radius: 0 8px 8px 0;
border-radius: 0 6px 6px 0;
background-color: var(--pvz-ui-surface-muted);
background-color: var(--pvz-ui-surface-muted);
background-image: none;
background-image: none;
color: var(--pvz-ui-accent-active);
color: var(--pvz-ui-accent);
box-shadow: none;
box-shadow: none;
}
}
522번째 줄: 438번째 줄:
body.skin-vector-legacy #mw-searchButton:hover,
body.skin-vector-legacy #mw-searchButton:hover,
body.skin-vector-legacy .searchButton:hover {
body.skin-vector-legacy .searchButton:hover {
background-color: var(--pvz-ui-sun-soft);
background-color: var(--pvz-ui-accent-soft);
}
}




/* 일반 버튼 — 나무 버튼(두께감) */
/* 일반 버튼 */
body.skin-vector-legacy button,
body.skin-vector-legacy button,
body.skin-vector-legacy input[type="button"],
body.skin-vector-legacy input[type="button"],
536번째 줄: 452번째 줄:
.oo-ui-buttonElement-button {
.oo-ui-buttonElement-button {
border-color: var(--pvz-ui-border-strong);
border-color: var(--pvz-ui-border-strong);
border-radius: 9px;
border-radius: 6px;
background-color: var(--pvz-ui-surface-muted);
background-color: var(--pvz-ui-surface-muted);
background-image:
background-image: none;
linear-gradient(
180deg,
var(--pvz-ui-btn-grad-top) 0%,
var(--pvz-ui-btn-grad-bottom) 100%
);
color: var(--pvz-ui-heading);
color: var(--pvz-ui-heading);
text-shadow:
0 1px 0 var(--pvz-ui-btn-highlight);
box-shadow:
box-shadow:
inset 0 1px 0 var(--pvz-ui-btn-highlight),
0 1px 2px
inset 0 -2px 0 var(--pvz-ui-btn-shade),
rgba(72, 43, 34, 0.1);
0 2px 0 var(--pvz-ui-btn-edge),
0 3px 6px var(--pvz-ui-shadow);
transition:
transition:
border-color 0.14s ease,
border-color 0.14s ease,
background-color 0.14s ease,
background-color 0.14s ease,
color 0.14s ease,
color 0.14s ease,
box-shadow 0.14s ease,
box-shadow 0.14s ease;
transform 0.08s ease;
}
}


573번째 줄: 479번째 줄:
border-color: var(--pvz-ui-accent);
border-color: var(--pvz-ui-accent);
background-color: var(--pvz-ui-accent-soft);
background-color: var(--pvz-ui-accent-soft);
background-image:
linear-gradient(
180deg,
var(--pvz-ui-btn-hover-top) 0%,
var(--pvz-ui-btn-hover-bottom) 100%
);
color: var(--pvz-ui-heading);
color: var(--pvz-ui-heading);
}
}
594번째 줄: 494번째 줄:
.oo-ui-buttonElement-button:active {
.oo-ui-buttonElement-button:active {
background-color: var(--pvz-ui-surface-strong);
background-color: var(--pvz-ui-surface-strong);
background-image: none;
box-shadow:
box-shadow:
inset 0 2px 4px var(--pvz-ui-inset-shadow),
inset 0 1px 3px
0 1px 0 var(--pvz-ui-btn-edge);
rgba(72, 43, 34, 0.15);
transform: translateY(1px);
}
}




/* 주요 동작 버튼 — 새싹 그린 */
/* 주요 동작 버튼 */
body.skin-vector-legacy .mw-ui-progressive,
body.skin-vector-legacy .mw-ui-progressive,
body.skin-vector-legacy
body.skin-vector-legacy
611번째 줄: 509번째 줄:
.oo-ui-flaggedElement-progressive
.oo-ui-flaggedElement-progressive
> .oo-ui-buttonElement-button {
> .oo-ui-buttonElement-button {
border-color: var(--pvz-ui-primary-border);
border-color: var(--pvz-ui-accent-active);
background-color: var(--pvz-ui-accent);
background-color: var(--pvz-ui-accent);
background-image:
color: #fffaf7;
linear-gradient(
180deg,
var(--pvz-ui-primary-grad-top) 0%,
var(--pvz-ui-primary-grad-bottom) 100%
);
color: #ffffff;
text-shadow:
0 1px 0 rgba(37, 68, 15, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
0 2px 0 var(--pvz-ui-primary-edge),
0 3px 6px var(--pvz-ui-shadow);
}
}


638번째 줄: 524번째 줄:
> .oo-ui-buttonElement-button:hover {
> .oo-ui-buttonElement-button:hover {
background-color: var(--pvz-ui-accent-hover);
background-color: var(--pvz-ui-accent-hover);
background-image:
linear-gradient(
180deg,
var(--pvz-ui-primary-hover-top) 0%,
var(--pvz-ui-primary-hover-bottom) 100%
);
color: #ffffff;
color: #ffffff;
}
}
655번째 줄: 535번째 줄:
.oo-ui-flaggedElement-destructive
.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button {
> .oo-ui-buttonElement-button {
border-color: var(--pvz-ui-danger-border);
border-color: #78322d;
background-color: #9e3f2c;
background-color: #984039;
background-image:
linear-gradient(
180deg,
var(--pvz-ui-danger-grad-top) 0%,
var(--pvz-ui-danger-grad-bottom) 100%
);
color: #ffffff;
color: #ffffff;
text-shadow:
0 1px 0 rgba(74, 22, 10, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 2px 0 var(--pvz-ui-danger-edge),
0 3px 6px var(--pvz-ui-shadow);
}
}


688번째 줄: 556번째 줄:
body.skin-vector-legacy .cdx-select {
body.skin-vector-legacy .cdx-select {
border-color: var(--pvz-ui-border);
border-color: var(--pvz-ui-border);
border-radius: 7px;
border-radius: 5px;
background-color: var(--pvz-ui-surface);
background-color: var(--pvz-ui-surface);
color: var(--pvz-ui-text);
color: var(--pvz-ui-text);
728번째 줄: 596번째 줄:
border-color: var(--pvz-ui-focus);
border-color: var(--pvz-ui-focus);
box-shadow:
box-shadow:
0 0 0 3px var(--pvz-ui-focus-ring);
0 0 0 2px
rgba(173, 106, 87, 0.16);
}
}


739번째 줄: 608번째 줄:




/* 목차·분류 — 정원 안내판 */
/* 목차·분류 */
body.skin-vector-legacy #toc,
body.skin-vector-legacy #toc,
body.skin-vector-legacy .toc,
body.skin-vector-legacy .toc,
745번째 줄: 614번째 줄:
body.skin-vector-legacy .catlinks {
body.skin-vector-legacy .catlinks {
border-color: var(--pvz-ui-border);
border-color: var(--pvz-ui-border);
border-radius: 10px;
border-radius: 8px;
background-color: var(--pvz-ui-surface-soft);
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
color: var(--pvz-ui-text);
box-shadow:
box-shadow:
inset 0 0 0 3px var(--pvz-ui-btn-highlight),
0 2px 8px
0 3px 8px
rgba(72, 43, 34, 0.06);
rgba(56, 42, 12, 0.1);
}
}


body.skin-vector-legacy #toc h2,
body.skin-vector-legacy #toc h2,
body.skin-vector-legacy .toc h2 {
body.skin-vector-legacy .toc h2 {
font-family: var(--pvz-ui-font-display);
color: var(--pvz-ui-heading);
color: var(--pvz-ui-heading);
}
}
792번째 줄: 659번째 줄:
> th {
> th {
border-color: var(--pvz-ui-border);
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-table-header);
background-color: var(--pvz-ui-surface-muted);
color: var(--pvz-ui-heading);
color: var(--pvz-ui-heading);
}
}
829번째 줄: 696번째 줄:


body.skin-vector-legacy blockquote {
body.skin-vector-legacy blockquote {
border-left-color: var(--pvz-ui-accent);
border-left-color: var(--pvz-ui-accent-soft);
background-color: var(--pvz-ui-surface-soft);
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
color: var(--pvz-ui-text);
}
/* 본문 가로줄 */
body.skin-vector-legacy .mw-body-content hr {
background-color: var(--pvz-ui-border-soft);
color: var(--pvz-ui-border-soft);
}
/* 썸네일·갤러리 — 사진 액자 */
body.skin-vector-legacy .thumbinner,
body.skin-vector-legacy
li.gallerybox
div.thumb {
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-surface-soft);
}
body.skin-vector-legacy .thumbimage {
border-color: var(--pvz-ui-border-soft);
background-color: var(--pvz-ui-surface);
}
body.skin-vector-legacy .thumbcaption,
body.skin-vector-legacy .gallerytext {
color: var(--pvz-ui-text-muted);
}
}


869번째 줄: 709번째 줄:
body.skin-vector-legacy .warningbox {
body.skin-vector-legacy .warningbox {
border-color: var(--pvz-ui-border-strong);
border-color: var(--pvz-ui-border-strong);
border-radius: 9px;
border-radius: 7px;
background-color: var(--pvz-ui-surface-soft);
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
color: var(--pvz-ui-text);
954번째 줄: 794번째 줄:
.mw-rcfilters-ui-changesListWrapperWidget {
.mw-rcfilters-ui-changesListWrapperWidget {
border-color: var(--pvz-ui-border);
border-color: var(--pvz-ui-border);
border-radius: 9px;
border-radius: 8px;
background-color: var(--pvz-ui-surface-soft);
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
color: var(--pvz-ui-text);
976번째 줄: 816번째 줄:
color: var(--pvz-ui-text);
color: var(--pvz-ui-text);
box-shadow:
box-shadow:
0 8px 24px
0 7px 22px
var(--pvz-ui-shadow-strong);
var(--pvz-ui-shadow-strong);
}
}
988번째 줄: 828번째 줄:
body.skin-vector-legacy
body.skin-vector-legacy
.cdx-menu-item--selected {
.cdx-menu-item--selected {
background-color: var(--pvz-ui-accent-soft);
background-color: var(--pvz-ui-surface-muted);
color: var(--pvz-ui-heading);
color: var(--pvz-ui-heading);
}
}




/* 푸터 — 잔디 위 HUD 텍스트 */
/* 푸터 */
body.skin-vector-legacy #footer,
body.skin-vector-legacy #footer {
body.skin-vector-legacy #footer li {
color: var(--pvz-ui-text-muted);
color: var(--pvz-ui-hud-text);
text-shadow:
0 1px 3px var(--pvz-ui-hud-shadow);
}
}


body.skin-vector-legacy #footer a {
body.skin-vector-legacy #footer a {
color: var(--pvz-ui-sun);
color: var(--pvz-ui-link);
}
 
body.skin-vector-legacy #footer a:hover {
color: #fffdf0;
}
}


body.skin-vector-legacy #footer-info,
body.skin-vector-legacy #footer-info,
body.skin-vector-legacy #footer-places {
body.skin-vector-legacy #footer-places {
border-color: var(--pvz-ui-hud-line);
border-color: var(--pvz-ui-border);
}
}




/* 텍스트 선택 — 햇살 하이라이트 */
/* 텍스트 선택 */
body.skin-vector-legacy ::selection {
body.skin-vector-legacy ::selection {
background: var(--pvz-ui-selection-background);
background: #d8b2a3;
color: var(--pvz-ui-selection-text);
color: #33231e;
}
}




/* 수동 다크 모드 — 달빛이 내리는 밤 앞마당 */
/* 수동 다크 모드 */
html.skin-theme-clientpref-night
html.skin-theme-clientpref-night
body.skin-vector-legacy {
body.skin-vector-legacy {
1,029번째 줄: 862번째 줄:


--pvz-ui-overlay-top:
--pvz-ui-overlay-top:
rgba(18, 26, 16, 0.45);
rgba(24, 19, 17, 0.34);


--pvz-ui-overlay-bottom:
--pvz-ui-overlay-bottom:
rgba(8, 13, 7, 0.8);
rgba(22, 17, 15, 0.78);


--pvz-ui-page: #141c10;
--pvz-ui-page: #241d1a;
--pvz-ui-page-deep: rgba(8, 13, 7, 0.85);
--pvz-ui-page-deep: rgba(28, 22, 20, 0.82);


--pvz-ui-surface:
--pvz-ui-surface:
rgba(42, 49, 32, 0.97);
rgba(47, 39, 35, 0.97);


--pvz-ui-surface-soft:
--pvz-ui-surface-soft:
rgba(50, 58, 39, 0.96);
rgba(57, 47, 43, 0.96);


--pvz-ui-surface-muted:
--pvz-ui-surface-muted:
rgba(61, 70, 47, 0.96);
rgba(72, 56, 50, 0.96);


--pvz-ui-surface-strong:
--pvz-ui-surface-strong:
rgba(74, 85, 57, 0.97);
rgba(87, 65, 57, 0.97);


--pvz-ui-border: #6d7a46;
--pvz-ui-border: #75584e;
--pvz-ui-border-soft: rgba(158, 175, 113, 0.4);
--pvz-ui-border-soft: rgba(151, 111, 98, 0.42);
--pvz-ui-border-strong: #95a55e;
--pvz-ui-border-strong: #9b7366;


--pvz-ui-accent: #7cba49;
--pvz-ui-accent: #a56f5e;
--pvz-ui-accent-hover: #8dcb59;
--pvz-ui-accent-hover: #c0836f;
--pvz-ui-accent-active: #68a136;
--pvz-ui-accent-active: #8c584b;
--pvz-ui-accent-soft: #3d4b29;
--pvz-ui-accent-soft: #67483f;


--pvz-ui-text: #e9ecd4;
--pvz-ui-text: #eaded8;
--pvz-ui-text-muted: #b2bc95;
--pvz-ui-text-muted: #bca9a1;
--pvz-ui-heading: #cde79a;
--pvz-ui-heading: #fff3ed;


--pvz-ui-link: #a5d76d;
--pvz-ui-link: #e0a18d;
--pvz-ui-link-hover: #ffc94e;
--pvz-ui-link-hover: #f5b7a3;
--pvz-ui-link-visited: #bfa8d8;
--pvz-ui-link-visited: #c8a2c3;
--pvz-ui-redlink: #ef9078;


--pvz-ui-focus: #efb040;
--pvz-ui-focus: #d68e78;
--pvz-ui-focus-ring: rgba(240, 178, 66, 0.32);


--pvz-ui-shadow:
--pvz-ui-shadow:
rgba(0, 0, 0, 0.32);
rgba(0, 0, 0, 0.26);


--pvz-ui-shadow-strong:
--pvz-ui-shadow-strong:
rgba(0, 0, 0, 0.52);
rgba(0, 0, 0, 0.42);
 
--pvz-ui-inset-shadow:
rgba(0, 0, 0, 0.38);
 
--pvz-ui-sun: #ffd24d;
--pvz-ui-sun-soft: #5c4f22;
 
--pvz-ui-hud-text: #eef0d8;
--pvz-ui-hud-shadow: rgba(0, 0, 0, 0.65);
--pvz-ui-hud-line: rgba(238, 240, 216, 0.18);
 
--pvz-ui-heading-glow:
rgba(0, 0, 0, 0.45);
 
--pvz-ui-btn-highlight:
rgba(255, 255, 255, 0.12);
 
--pvz-ui-btn-shade:
rgba(0, 0, 0, 0.28);
 
--pvz-ui-btn-edge: #232b14;
--pvz-ui-btn-grad-top: #4d5838;
--pvz-ui-btn-grad-bottom: #3b452c;
--pvz-ui-btn-hover-top: #5a6741;
--pvz-ui-btn-hover-bottom: #475336;
 
--pvz-ui-tab-grad-top: #455032;
--pvz-ui-tab-grad-bottom: #363f27;
 
--pvz-ui-primary-border: #3c691e;
--pvz-ui-primary-edge: #2b4d14;
--pvz-ui-primary-grad-top: #7cbb4a;
--pvz-ui-primary-grad-bottom: #4f8a29;
--pvz-ui-primary-hover-top: #8bca58;
--pvz-ui-primary-hover-bottom: #5b9a33;
 
--pvz-ui-danger-border: #692c1f;
--pvz-ui-danger-edge: #521f14;
--pvz-ui-danger-grad-top: #b25a44;
--pvz-ui-danger-grad-bottom: #8a3a29;
 
--pvz-ui-table-header: #414d2c;
 
--pvz-ui-selection-background: #8aa542;
--pvz-ui-selection-text: #141c0a;


--pvz-ui-error-border: #ae584a;
--pvz-ui-error-border: #a85d56;
--pvz-ui-error-background: #4a2c26;
--pvz-ui-error-background: #4c302d;


--pvz-ui-warning-border: #b98d45;
--pvz-ui-warning-border: #a98455;
--pvz-ui-warning-background: #453820;
--pvz-ui-warning-background: #493c2b;


--pvz-ui-success-border: #7ba24f;
--pvz-ui-success-border: #718a65;
--pvz-ui-success-background: #33422a;
--pvz-ui-success-background: #34402f;
}
}


1,140번째 줄: 926번째 줄:


--pvz-ui-overlay-top:
--pvz-ui-overlay-top:
rgba(18, 26, 16, 0.45);
rgba(24, 19, 17, 0.34);


--pvz-ui-overlay-bottom:
--pvz-ui-overlay-bottom:
rgba(8, 13, 7, 0.8);
rgba(22, 17, 15, 0.78);


--pvz-ui-page: #141c10;
--pvz-ui-page: #241d1a;
--pvz-ui-page-deep:
--pvz-ui-page-deep:
rgba(8, 13, 7, 0.85);
rgba(28, 22, 20, 0.82);


--pvz-ui-surface:
--pvz-ui-surface:
rgba(42, 49, 32, 0.97);
rgba(47, 39, 35, 0.97);


--pvz-ui-surface-soft:
--pvz-ui-surface-soft:
rgba(50, 58, 39, 0.96);
rgba(57, 47, 43, 0.96);


--pvz-ui-surface-muted:
--pvz-ui-surface-muted:
rgba(61, 70, 47, 0.96);
rgba(72, 56, 50, 0.96);


--pvz-ui-surface-strong:
--pvz-ui-surface-strong:
rgba(74, 85, 57, 0.97);
rgba(87, 65, 57, 0.97);


--pvz-ui-border: #6d7a46;
--pvz-ui-border: #75584e;
--pvz-ui-border-soft:
--pvz-ui-border-soft:
rgba(158, 175, 113, 0.4);
rgba(151, 111, 98, 0.42);


--pvz-ui-border-strong: #95a55e;
--pvz-ui-border-strong: #9b7366;


--pvz-ui-accent: #7cba49;
--pvz-ui-accent: #a56f5e;
--pvz-ui-accent-hover: #8dcb59;
--pvz-ui-accent-hover: #c0836f;
--pvz-ui-accent-active: #68a136;
--pvz-ui-accent-active: #8c584b;
--pvz-ui-accent-soft: #3d4b29;
--pvz-ui-accent-soft: #67483f;


--pvz-ui-text: #e9ecd4;
--pvz-ui-text: #eaded8;
--pvz-ui-text-muted: #b2bc95;
--pvz-ui-text-muted: #bca9a1;
--pvz-ui-heading: #cde79a;
--pvz-ui-heading: #fff3ed;


--pvz-ui-link: #a5d76d;
--pvz-ui-link: #e0a18d;
--pvz-ui-link-hover: #ffc94e;
--pvz-ui-link-hover: #f5b7a3;
--pvz-ui-link-visited: #bfa8d8;
--pvz-ui-link-visited: #c8a2c3;
--pvz-ui-redlink: #ef9078;


--pvz-ui-focus: #efb040;
--pvz-ui-focus: #d68e78;
--pvz-ui-focus-ring:
rgba(240, 178, 66, 0.32);


--pvz-ui-shadow:
--pvz-ui-shadow:
rgba(0, 0, 0, 0.32);
rgba(0, 0, 0, 0.26);


--pvz-ui-shadow-strong:
--pvz-ui-shadow-strong:
rgba(0, 0, 0, 0.52);
rgba(0, 0, 0, 0.42);
 
--pvz-ui-inset-shadow:
rgba(0, 0, 0, 0.38);
 
--pvz-ui-sun: #ffd24d;
--pvz-ui-sun-soft: #5c4f22;
 
--pvz-ui-hud-text: #eef0d8;
--pvz-ui-hud-shadow:
rgba(0, 0, 0, 0.65);
 
--pvz-ui-hud-line:
rgba(238, 240, 216, 0.18);
 
--pvz-ui-heading-glow:
rgba(0, 0, 0, 0.45);
 
--pvz-ui-btn-highlight:
rgba(255, 255, 255, 0.12);
 
--pvz-ui-btn-shade:
rgba(0, 0, 0, 0.28);
 
--pvz-ui-btn-edge: #232b14;
--pvz-ui-btn-grad-top: #4d5838;
--pvz-ui-btn-grad-bottom: #3b452c;
--pvz-ui-btn-hover-top: #5a6741;
--pvz-ui-btn-hover-bottom: #475336;
 
--pvz-ui-tab-grad-top: #455032;
--pvz-ui-tab-grad-bottom: #363f27;
 
--pvz-ui-primary-border: #3c691e;
--pvz-ui-primary-edge: #2b4d14;
--pvz-ui-primary-grad-top: #7cbb4a;
--pvz-ui-primary-grad-bottom: #4f8a29;
--pvz-ui-primary-hover-top: #8bca58;
--pvz-ui-primary-hover-bottom: #5b9a33;
 
--pvz-ui-danger-border: #692c1f;
--pvz-ui-danger-edge: #521f14;
--pvz-ui-danger-grad-top: #b25a44;
--pvz-ui-danger-grad-bottom: #8a3a29;
 
--pvz-ui-table-header: #414d2c;
 
--pvz-ui-selection-background: #8aa542;
--pvz-ui-selection-text: #141c0a;


--pvz-ui-error-border: #ae584a;
--pvz-ui-error-border: #a85d56;
--pvz-ui-error-background: #4a2c26;
--pvz-ui-error-background: #4c302d;


--pvz-ui-warning-border: #b98d45;
--pvz-ui-warning-border: #a98455;
--pvz-ui-warning-background: #453820;
--pvz-ui-warning-background: #493c2b;


--pvz-ui-success-border: #7ba24f;
--pvz-ui-success-border: #718a65;
--pvz-ui-success-background: #33422a;
--pvz-ui-success-background: #34402f;
}
}
}
}

2026년 7월 26일 (일) 14:07 판

/*
 * Vector 2010 인터페이스 디자인
 * 적용 위치: 미디어위키:Gadget-vector.css
 *
 * 기존 UI의 배치·크기·기능은 유지하고
 * 배경, 색상, 테두리, 그림자와 상태 표현만 변경한다.
 */


/* 기본 색상 */
body.skin-vector-legacy {
	--pvz-ui-background-image:
		url("/wiki/Special:Redirect/file/Wiki_Bg_Light.png");

	--pvz-ui-overlay-top:
		rgba(247, 239, 231, 0.3);

	--pvz-ui-overlay-bottom:
		rgba(232, 216, 205, 0.76);

	--pvz-ui-page: #eee3da;
	--pvz-ui-page-deep: rgba(224, 207, 196, 0.78);

	--pvz-ui-surface:
		rgba(255, 252, 249, 0.97);

	--pvz-ui-surface-soft:
		rgba(248, 241, 236, 0.95);

	--pvz-ui-surface-muted:
		rgba(235, 221, 212, 0.95);

	--pvz-ui-surface-strong:
		rgba(220, 198, 185, 0.96);

	--pvz-ui-border: #c8aea1;
	--pvz-ui-border-soft: rgba(170, 137, 121, 0.38);
	--pvz-ui-border-strong: #9b7463;

	--pvz-ui-accent: #775145;
	--pvz-ui-accent-hover: #684238;
	--pvz-ui-accent-active: #56362d;
	--pvz-ui-accent-soft: #dec5b8;

	--pvz-ui-text: #49362f;
	--pvz-ui-text-muted: #77635c;
	--pvz-ui-heading: #3e2d27;

	--pvz-ui-link: #7c4439;
	--pvz-ui-link-hover: #a14f40;
	--pvz-ui-link-visited: #70516a;

	--pvz-ui-focus: #ad6a57;

	--pvz-ui-shadow:
		rgba(72, 43, 34, 0.12);

	--pvz-ui-shadow-strong:
		rgba(72, 43, 34, 0.2);

	--pvz-ui-error-border: #b96860;
	--pvz-ui-error-background: #f8e5e2;

	--pvz-ui-warning-border: #c29a5e;
	--pvz-ui-warning-background: #f8eedc;

	--pvz-ui-success-border: #849b76;
	--pvz-ui-success-background: #e9f1e5;

	background-color: var(--pvz-ui-page);
	background-image:
		linear-gradient(
			180deg,
			var(--pvz-ui-overlay-top) 0%,
			var(--pvz-ui-overlay-bottom) 100%
		),
		var(--pvz-ui-background-image);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
	color: var(--pvz-ui-text);
}


/* 공통 링크 */
body.skin-vector-legacy a {
	color: var(--pvz-ui-link);
	transition:
		color 0.14s ease,
		background-color 0.14s ease,
		border-color 0.14s ease;
}

body.skin-vector-legacy a:visited {
	color: var(--pvz-ui-link-visited);
}

body.skin-vector-legacy a:hover,
body.skin-vector-legacy a:focus {
	color: var(--pvz-ui-link-hover);
}


/* 공통 포커스 */
body.skin-vector-legacy a:focus,
body.skin-vector-legacy button:focus,
body.skin-vector-legacy input:focus,
body.skin-vector-legacy select:focus,
body.skin-vector-legacy textarea:focus {
	outline-color: var(--pvz-ui-focus);
}


/* 페이지 상단 바탕 */
body.skin-vector-legacy #mw-page-base {
	background-color: transparent;
	background-image:
		linear-gradient(
			180deg,
			var(--pvz-ui-page-deep) 0%,
			rgba(255, 255, 255, 0) 100%
		);
}

body.skin-vector-legacy #mw-head-base {
	background: transparent;
}


/* 본문창 */
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
	border-color: var(--pvz-ui-border-strong);
	border-radius: 10px 0 0 10px;
	background: var(--pvz-ui-surface);
	color: var(--pvz-ui-text);
	box-shadow:
		0 5px 18px var(--pvz-ui-shadow),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.skin-vector-legacy .mw-body-content {
	color: var(--pvz-ui-text);
}


/* 제목 */
body.skin-vector-legacy .mw-body-content h1,
body.skin-vector-legacy .mw-body-content h2,
body.skin-vector-legacy .mw-body-content h3,
body.skin-vector-legacy .mw-body-content h4,
body.skin-vector-legacy .mw-body-content h5,
body.skin-vector-legacy .mw-body-content h6,
body.skin-vector-legacy #firstHeading {
	color: var(--pvz-ui-heading);
	border-color: var(--pvz-ui-border);
}

body.skin-vector-legacy #firstHeading {
	text-shadow:
		0 1px 0
		rgba(255, 255, 255, 0.45);
}


/* 로고 */
body.skin-vector-legacy #p-logo a,
body.skin-vector-legacy .mw-wiki-logo {
	filter:
		drop-shadow(
			0 3px 5px
			rgba(65, 39, 31, 0.2)
		);
}


/* 좌측 사이드바 */
body.skin-vector-legacy #mw-panel {
	color: var(--pvz-ui-text);
}

body.skin-vector-legacy #mw-panel .portal h3,
body.skin-vector-legacy
	#mw-panel
	.vector-menu-heading {
	color: var(--pvz-ui-heading);
	text-shadow:
		0 1px 0
		rgba(255, 255, 255, 0.42);
}

body.skin-vector-legacy
	#mw-panel
	.portal
	.body,
body.skin-vector-legacy
	#mw-panel
	.vector-menu-content {
	border: 1px solid var(--pvz-ui-border-soft);
	border-radius: 8px;
	background: var(--pvz-ui-surface-soft);
	box-shadow:
		0 2px 8px
		rgba(72, 43, 34, 0.07),
		inset 0 1px 0
		rgba(255, 255, 255, 0.42);
}

body.skin-vector-legacy
	#mw-panel
	.portal
	.body
	li
	a,
body.skin-vector-legacy
	#mw-panel
	.vector-menu-content
	li
	a {
	color: var(--pvz-ui-link);
}

body.skin-vector-legacy
	#mw-panel
	.portal
	.body
	li
	a:hover,
body.skin-vector-legacy
	#mw-panel
	.vector-menu-content
	li
	a:hover {
	color: var(--pvz-ui-link-hover);
}


/* 상단 개인 메뉴 */
body.skin-vector-legacy #p-personal,
body.skin-vector-legacy #p-personal a,
body.skin-vector-legacy #p-personal li {
	color: var(--pvz-ui-text-muted);
}

body.skin-vector-legacy #p-personal a:hover {
	color: var(--pvz-ui-link-hover);
}


/* 상단 탭 배경 제거 */
body.skin-vector-legacy .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs-legacy,
body.skin-vector-legacy #left-navigation,
body.skin-vector-legacy #right-navigation,
body.skin-vector-legacy .vector-menu-tabs ul,
body.skin-vector-legacy
	.vector-menu-tabs-legacy
	ul {
	background-image: none;
}


/* 기본 탭 */
body.skin-vector-legacy .vector-menu-tabs li,
body.skin-vector-legacy
	.vector-menu-tabs-legacy
	li {
	border-color: var(--pvz-ui-border);
	background-color: var(--pvz-ui-surface-muted);
	background-image: none;
	transition:
		background-color 0.14s ease,
		border-color 0.14s ease;
}

body.skin-vector-legacy
	.vector-menu-tabs
	li
	a,
body.skin-vector-legacy
	.vector-menu-tabs-legacy
	li
	a {
	color: var(--pvz-ui-link);
	background-image: none;
	text-shadow:
		0 1px 0
		rgba(255, 255, 255, 0.4);
}

body.skin-vector-legacy
	.vector-menu-tabs
	li:hover,
body.skin-vector-legacy
	.vector-menu-tabs-legacy
	li:hover {
	background-color: var(--pvz-ui-accent-soft);
}


/* 선택된 탭 */
body.skin-vector-legacy
	.vector-menu-tabs
	li.selected,
body.skin-vector-legacy
	.vector-menu-tabs-legacy
	li.selected {
	border-color: var(--pvz-ui-border-strong);
	background-color: var(--pvz-ui-surface);
	background-image: none;
}

body.skin-vector-legacy
	.vector-menu-tabs
	li.selected
	a,
body.skin-vector-legacy
	.vector-menu-tabs-legacy
	li.selected
	a {
	color: var(--pvz-ui-heading);
}


/* 더보기 버튼 */
body.skin-vector-legacy
	.vector-menu-dropdown
	.vector-menu-heading,
body.skin-vector-legacy
	#p-cactions
	.vector-menu-heading {
	border-color: var(--pvz-ui-border);
	background-color: var(--pvz-ui-surface-muted);
	background-image: none;
	color: var(--pvz-ui-link);
}

body.skin-vector-legacy
	.vector-menu-dropdown
	.vector-menu-heading:hover,
body.skin-vector-legacy
	#p-cactions
	.vector-menu-heading:hover {
	background-color: var(--pvz-ui-accent-soft);
	color: var(--pvz-ui-link-hover);
}


/* 더보기 메뉴 */
body.skin-vector-legacy
	.vector-menu-dropdown
	.vector-menu-content,
body.skin-vector-legacy
	#p-cactions
	.vector-menu-content {
	border-color: var(--pvz-ui-border-strong);
	border-radius: 7px;
	background: var(--pvz-ui-surface);
	box-shadow:
		0 6px 18px
		var(--pvz-ui-shadow-strong);
}

body.skin-vector-legacy
	.vector-menu-dropdown
	.vector-menu-content
	a:hover,
body.skin-vector-legacy
	#p-cactions
	.vector-menu-content
	a:hover {
	background: var(--pvz-ui-surface-soft);
	color: var(--pvz-ui-link-hover);
}


/* 검색창 외곽 */
body.skin-vector-legacy #simpleSearch,
body.skin-vector-legacy .vector-search-box {
	border-color: var(--pvz-ui-border-strong);
	border-radius: 7px;
	background-color: var(--pvz-ui-surface);
	box-shadow:
		inset 0 1px 3px
		rgba(72, 43, 34, 0.09),
		0 1px 0
		rgba(255, 255, 255, 0.42);
	transition:
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		background-color 0.16s ease;
}


/* 검색 입력 요소 */
body.skin-vector-legacy
	#simpleSearch
	#searchInput,
body.skin-vector-legacy
	.vector-search-box-input {
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--pvz-ui-text);
	box-shadow: none;
}


/* 검색창 포커스 */
body.skin-vector-legacy
	#simpleSearch:focus-within,
body.skin-vector-legacy
	.vector-search-box:focus-within {
	border-color: var(--pvz-ui-focus);
	box-shadow:
		0 0 0 2px
		rgba(173, 106, 87, 0.18),
		inset 0 1px 3px
		rgba(72, 43, 34, 0.07);
}


/* 검색 버튼 */
body.skin-vector-legacy #searchButton,
body.skin-vector-legacy #mw-searchButton,
body.skin-vector-legacy .searchButton {
	border-color: var(--pvz-ui-border-strong);
	border-radius: 0 6px 6px 0;
	background-color: var(--pvz-ui-surface-muted);
	background-image: none;
	color: var(--pvz-ui-accent);
	box-shadow: none;
}

body.skin-vector-legacy #searchButton:hover,
body.skin-vector-legacy #mw-searchButton:hover,
body.skin-vector-legacy .searchButton:hover {
	background-color: var(--pvz-ui-accent-soft);
}


/* 일반 버튼 */
body.skin-vector-legacy button,
body.skin-vector-legacy input[type="button"],
body.skin-vector-legacy input[type="submit"],
body.skin-vector-legacy input[type="reset"],
body.skin-vector-legacy .mw-ui-button,
body.skin-vector-legacy .cdx-button,
body.skin-vector-legacy
	.oo-ui-buttonElement-button {
	border-color: var(--pvz-ui-border-strong);
	border-radius: 6px;
	background-color: var(--pvz-ui-surface-muted);
	background-image: none;
	color: var(--pvz-ui-heading);
	box-shadow:
		0 1px 2px
		rgba(72, 43, 34, 0.1);
	transition:
		border-color 0.14s ease,
		background-color 0.14s ease,
		color 0.14s ease,
		box-shadow 0.14s ease;
}

body.skin-vector-legacy button:hover,
body.skin-vector-legacy
	input[type="button"]:hover,
body.skin-vector-legacy
	input[type="submit"]:hover,
body.skin-vector-legacy
	input[type="reset"]:hover,
body.skin-vector-legacy .mw-ui-button:hover,
body.skin-vector-legacy .cdx-button:hover,
body.skin-vector-legacy
	.oo-ui-buttonElement-button:hover {
	border-color: var(--pvz-ui-accent);
	background-color: var(--pvz-ui-accent-soft);
	color: var(--pvz-ui-heading);
}

body.skin-vector-legacy button:active,
body.skin-vector-legacy
	input[type="button"]:active,
body.skin-vector-legacy
	input[type="submit"]:active,
body.skin-vector-legacy
	.mw-ui-button:active,
body.skin-vector-legacy
	.cdx-button:active,
body.skin-vector-legacy
	.oo-ui-buttonElement-button:active {
	background-color: var(--pvz-ui-surface-strong);
	box-shadow:
		inset 0 1px 3px
		rgba(72, 43, 34, 0.15);
}


/* 주요 동작 버튼 */
body.skin-vector-legacy .mw-ui-progressive,
body.skin-vector-legacy
	.mw-ui-button.mw-ui-progressive,
body.skin-vector-legacy
	.cdx-button--action-progressive,
body.skin-vector-legacy
	.oo-ui-flaggedElement-progressive
	> .oo-ui-buttonElement-button {
	border-color: var(--pvz-ui-accent-active);
	background-color: var(--pvz-ui-accent);
	color: #fffaf7;
}

body.skin-vector-legacy
	.mw-ui-progressive:hover,
body.skin-vector-legacy
	.mw-ui-button.mw-ui-progressive:hover,
body.skin-vector-legacy
	.cdx-button--action-progressive:hover,
body.skin-vector-legacy
	.oo-ui-flaggedElement-progressive
	> .oo-ui-buttonElement-button:hover {
	background-color: var(--pvz-ui-accent-hover);
	color: #ffffff;
}


/* 위험 동작 버튼 */
body.skin-vector-legacy .mw-ui-destructive,
body.skin-vector-legacy
	.cdx-button--action-destructive,
body.skin-vector-legacy
	.oo-ui-flaggedElement-destructive
	> .oo-ui-buttonElement-button {
	border-color: #78322d;
	background-color: #984039;
	color: #ffffff;
}


/* 일반 입력 요소 */
body.skin-vector-legacy
	input:not([type="button"]):not(
		[type="submit"]
	):not([type="reset"]):not(
		[type="checkbox"]
	):not([type="radio"]),
body.skin-vector-legacy select,
body.skin-vector-legacy textarea,
body.skin-vector-legacy
	.oo-ui-inputWidget-input,
body.skin-vector-legacy
	.cdx-text-input__input,
body.skin-vector-legacy .cdx-select {
	border-color: var(--pvz-ui-border);
	border-radius: 5px;
	background-color: var(--pvz-ui-surface);
	color: var(--pvz-ui-text);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;
}

body.skin-vector-legacy
	input:not([type="button"]):not(
		[type="submit"]
	):not([type="reset"]):not(
		[type="checkbox"]
	):not([type="radio"]):hover,
body.skin-vector-legacy select:hover,
body.skin-vector-legacy textarea:hover,
body.skin-vector-legacy
	.oo-ui-inputWidget-input:hover,
body.skin-vector-legacy
	.cdx-text-input__input:hover,
body.skin-vector-legacy .cdx-select:hover {
	border-color: var(--pvz-ui-border-strong);
}

body.skin-vector-legacy
	input:not([type="button"]):not(
		[type="submit"]
	):not([type="reset"]):not(
		[type="checkbox"]
	):not([type="radio"]):focus,
body.skin-vector-legacy select:focus,
body.skin-vector-legacy textarea:focus,
body.skin-vector-legacy
	.oo-ui-inputWidget-input:focus,
body.skin-vector-legacy
	.cdx-text-input__input:focus,
body.skin-vector-legacy .cdx-select:focus {
	border-color: var(--pvz-ui-focus);
	box-shadow:
		0 0 0 2px
		rgba(173, 106, 87, 0.16);
}

body.skin-vector-legacy
	input[type="checkbox"],
body.skin-vector-legacy
	input[type="radio"] {
	accent-color: var(--pvz-ui-accent);
}


/* 목차·분류 */
body.skin-vector-legacy #toc,
body.skin-vector-legacy .toc,
body.skin-vector-legacy .mw-warning,
body.skin-vector-legacy .catlinks {
	border-color: var(--pvz-ui-border);
	border-radius: 8px;
	background-color: var(--pvz-ui-surface-soft);
	color: var(--pvz-ui-text);
	box-shadow:
		0 2px 8px
		rgba(72, 43, 34, 0.06);
}

body.skin-vector-legacy #toc h2,
body.skin-vector-legacy .toc h2 {
	color: var(--pvz-ui-heading);
}

body.skin-vector-legacy .tocnumber {
	color: var(--pvz-ui-text-muted);
}


/* 표 */
body.skin-vector-legacy table.wikitable,
body.skin-vector-legacy .wikitable {
	border-color: var(--pvz-ui-border-strong);
	background-color: var(--pvz-ui-surface);
	color: var(--pvz-ui-text);
}

body.skin-vector-legacy
	table.wikitable
	> tr
	> th,
body.skin-vector-legacy
	table.wikitable
	> *
	> tr
	> th,
body.skin-vector-legacy
	.wikitable
	> tr
	> th,
body.skin-vector-legacy
	.wikitable
	> *
	> tr
	> th {
	border-color: var(--pvz-ui-border);
	background-color: var(--pvz-ui-surface-muted);
	color: var(--pvz-ui-heading);
}

body.skin-vector-legacy
	table.wikitable
	> tr
	> td,
body.skin-vector-legacy
	table.wikitable
	> *
	> tr
	> td,
body.skin-vector-legacy
	.wikitable
	> tr
	> td,
body.skin-vector-legacy
	.wikitable
	> *
	> tr
	> td {
	border-color: var(--pvz-ui-border);
	background-color: var(--pvz-ui-surface);
}


/* 코드·인용 */
body.skin-vector-legacy pre,
body.skin-vector-legacy code,
body.skin-vector-legacy .mw-code {
	border-color: var(--pvz-ui-border);
	background-color: var(--pvz-ui-surface-soft);
	color: var(--pvz-ui-text);
}

body.skin-vector-legacy blockquote {
	border-left-color: var(--pvz-ui-accent-soft);
	background-color: var(--pvz-ui-surface-soft);
	color: var(--pvz-ui-text);
}


/* 공통 메시지 */
body.skin-vector-legacy .mw-message-box,
body.skin-vector-legacy .messagebox,
body.skin-vector-legacy .errorbox,
body.skin-vector-legacy .successbox,
body.skin-vector-legacy .warningbox {
	border-color: var(--pvz-ui-border-strong);
	border-radius: 7px;
	background-color: var(--pvz-ui-surface-soft);
	color: var(--pvz-ui-text);
}


/* 오류 메시지 */
body.skin-vector-legacy
	.mw-message-box-error,
body.skin-vector-legacy .errorbox {
	border-color: var(--pvz-ui-error-border);
	background-color: var(--pvz-ui-error-background);
}


/* 경고 메시지 */
body.skin-vector-legacy
	.mw-message-box-warning,
body.skin-vector-legacy .warningbox {
	border-color: var(--pvz-ui-warning-border);
	background-color: var(--pvz-ui-warning-background);
}


/* 성공 메시지 */
body.skin-vector-legacy
	.mw-message-box-success,
body.skin-vector-legacy .successbox {
	border-color: var(--pvz-ui-success-border);
	background-color: var(--pvz-ui-success-background);
}


/* 편집 화면 */
body.skin-vector-legacy
	.wikiEditor-ui-toolbar,
body.skin-vector-legacy .wikiEditor-ui-top,
body.skin-vector-legacy .wikiEditor-ui-view,
body.skin-vector-legacy .editOptions {
	border-color: var(--pvz-ui-border);
	background-color: var(--pvz-ui-surface-soft);
}

body.skin-vector-legacy
	.wikiEditor-ui-toolbar
	.group,
body.skin-vector-legacy
	.wikiEditor-ui-toolbar
	.section {
	border-color: var(--pvz-ui-border);
}


/* 검색 결과 */
body.skin-vector-legacy
	.mw-search-result-heading
	a,
body.skin-vector-legacy
	.mw-specialpage-summary
	a {
	color: var(--pvz-ui-link);
}

body.skin-vector-legacy
	.mw-search-result-data,
body.skin-vector-legacy .searchresult,
body.skin-vector-legacy
	.mw-search-profile-tabs {
	color: var(--pvz-ui-text-muted);
}


/* 특수 문서 표면 */
body.skin-vector-legacy
	.mw-search-profile-tabs,
body.skin-vector-legacy
	.mw-pager-navigation-bar,
body.skin-vector-legacy .TablePager_nav,
body.skin-vector-legacy
	.mw-changeslist-legend,
body.skin-vector-legacy
	.mw-rcfilters-ui-filterWrapperWidget,
body.skin-vector-legacy
	.mw-rcfilters-ui-changesListWrapperWidget {
	border-color: var(--pvz-ui-border);
	border-radius: 8px;
	background-color: var(--pvz-ui-surface-soft);
	color: var(--pvz-ui-text);
}


/* 팝업·OOUI·Codex 메뉴 */
body.skin-vector-legacy
	.oo-ui-popupWidget-popup,
body.skin-vector-legacy
	.oo-ui-menuSelectWidget,
body.skin-vector-legacy .cdx-menu,
body.skin-vector-legacy
	.cdx-dialog__body,
body.skin-vector-legacy
	.cdx-dialog__header,
body.skin-vector-legacy
	.cdx-dialog__footer {
	border-color: var(--pvz-ui-border-strong);
	background-color: var(--pvz-ui-surface);
	color: var(--pvz-ui-text);
	box-shadow:
		0 7px 22px
		var(--pvz-ui-shadow-strong);
}

body.skin-vector-legacy
	.oo-ui-optionWidget-highlighted,
body.skin-vector-legacy
	.oo-ui-optionWidget-selected,
body.skin-vector-legacy
	.cdx-menu-item:hover,
body.skin-vector-legacy
	.cdx-menu-item--selected {
	background-color: var(--pvz-ui-surface-muted);
	color: var(--pvz-ui-heading);
}


/* 푸터 */
body.skin-vector-legacy #footer {
	color: var(--pvz-ui-text-muted);
}

body.skin-vector-legacy #footer a {
	color: var(--pvz-ui-link);
}

body.skin-vector-legacy #footer-info,
body.skin-vector-legacy #footer-places {
	border-color: var(--pvz-ui-border);
}


/* 텍스트 선택 */
body.skin-vector-legacy ::selection {
	background: #d8b2a3;
	color: #33231e;
}


/* 수동 다크 모드 */
html.skin-theme-clientpref-night
	body.skin-vector-legacy {
	--pvz-ui-background-image:
		url("/wiki/Special:Redirect/file/Wiki_Bg_Dark.png");

	--pvz-ui-overlay-top:
		rgba(24, 19, 17, 0.34);

	--pvz-ui-overlay-bottom:
		rgba(22, 17, 15, 0.78);

	--pvz-ui-page: #241d1a;
	--pvz-ui-page-deep: rgba(28, 22, 20, 0.82);

	--pvz-ui-surface:
		rgba(47, 39, 35, 0.97);

	--pvz-ui-surface-soft:
		rgba(57, 47, 43, 0.96);

	--pvz-ui-surface-muted:
		rgba(72, 56, 50, 0.96);

	--pvz-ui-surface-strong:
		rgba(87, 65, 57, 0.97);

	--pvz-ui-border: #75584e;
	--pvz-ui-border-soft: rgba(151, 111, 98, 0.42);
	--pvz-ui-border-strong: #9b7366;

	--pvz-ui-accent: #a56f5e;
	--pvz-ui-accent-hover: #c0836f;
	--pvz-ui-accent-active: #8c584b;
	--pvz-ui-accent-soft: #67483f;

	--pvz-ui-text: #eaded8;
	--pvz-ui-text-muted: #bca9a1;
	--pvz-ui-heading: #fff3ed;

	--pvz-ui-link: #e0a18d;
	--pvz-ui-link-hover: #f5b7a3;
	--pvz-ui-link-visited: #c8a2c3;

	--pvz-ui-focus: #d68e78;

	--pvz-ui-shadow:
		rgba(0, 0, 0, 0.26);

	--pvz-ui-shadow-strong:
		rgba(0, 0, 0, 0.42);

	--pvz-ui-error-border: #a85d56;
	--pvz-ui-error-background: #4c302d;

	--pvz-ui-warning-border: #a98455;
	--pvz-ui-warning-background: #493c2b;

	--pvz-ui-success-border: #718a65;
	--pvz-ui-success-background: #34402f;
}


/* 운영체제 설정을 따르는 다크 모드 */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os
		body.skin-vector-legacy {
		--pvz-ui-background-image:
			url("/wiki/Special:Redirect/file/Wiki_Bg_Dark.png");

		--pvz-ui-overlay-top:
			rgba(24, 19, 17, 0.34);

		--pvz-ui-overlay-bottom:
			rgba(22, 17, 15, 0.78);

		--pvz-ui-page: #241d1a;
		--pvz-ui-page-deep:
			rgba(28, 22, 20, 0.82);

		--pvz-ui-surface:
			rgba(47, 39, 35, 0.97);

		--pvz-ui-surface-soft:
			rgba(57, 47, 43, 0.96);

		--pvz-ui-surface-muted:
			rgba(72, 56, 50, 0.96);

		--pvz-ui-surface-strong:
			rgba(87, 65, 57, 0.97);

		--pvz-ui-border: #75584e;
		--pvz-ui-border-soft:
			rgba(151, 111, 98, 0.42);

		--pvz-ui-border-strong: #9b7366;

		--pvz-ui-accent: #a56f5e;
		--pvz-ui-accent-hover: #c0836f;
		--pvz-ui-accent-active: #8c584b;
		--pvz-ui-accent-soft: #67483f;

		--pvz-ui-text: #eaded8;
		--pvz-ui-text-muted: #bca9a1;
		--pvz-ui-heading: #fff3ed;

		--pvz-ui-link: #e0a18d;
		--pvz-ui-link-hover: #f5b7a3;
		--pvz-ui-link-visited: #c8a2c3;

		--pvz-ui-focus: #d68e78;

		--pvz-ui-shadow:
			rgba(0, 0, 0, 0.26);

		--pvz-ui-shadow-strong:
			rgba(0, 0, 0, 0.42);

		--pvz-ui-error-border: #a85d56;
		--pvz-ui-error-background: #4c302d;

		--pvz-ui-warning-border: #a98455;
		--pvz-ui-warning-background: #493c2b;

		--pvz-ui-success-border: #718a65;
		--pvz-ui-success-background: #34402f;
	}
}