미디어위키:Gadget-Vector.css
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* ===== base.txt ===== */
/* =========================
MediaWiki:Gadget-base.css
========================= */
:root {
--pvz-mobile-custombar-height: 64px;
--pvz-main: #3d8f45;
--pvz-dark: #215a31;
--pvz-light: #e3f3d9;
--pvz-bg: #f2f8ec;
--pvz-document-title-font: 'PVZ SB Aggro B', 'SB Aggro B', 'SB 어그로 B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-document-title-weight: normal;
--pvz-section-title-font: 'PVZ SB Aggro M', 'SB Aggro M', 'SB 어그로 M', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-section-title-weight: normal;
--pvz-toc-item-font: 'PVZ SB Aggro L', 'SB Aggro L', 'SB 어그로 L', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-toc-item-weight: normal;
--pvz-toc-number-font: 'PVZ SB Aggro B', 'SB Aggro B', 'SB 어그로 B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-toc-number-weight: normal;
--pvz-heading-font: var(--pvz-section-title-font);
--pvz-body-font: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--pvz-board-side-width: 218px;
--pvz-board-side-gap: 14px;
--pvz-board-width-normal: calc(100vw - var(--pvz-board-side-width) - var(--pvz-board-side-gap) - 24px);
--pvz-board-width-wide: calc(100vw - var(--pvz-board-side-width) - var(--pvz-board-side-gap) - 20px);
--pvz-board-width: var(--pvz-board-width-normal);
--pvz-board-frame-outer-line: #246034;
--pvz-board-frame-outer-bg: #8fc77f;
--pvz-board-frame-second: #eef7e7;
--pvz-board-frame-inner: #d7ebcf;
--pvz-board-frame-size: 5px;
--pvz-board-frame-outer-bg-size: 2px;
--pvz-board-frame-inner-size: 2px;
--pvz-board-frame-outer-line-size: 3px;
--pvz-board-radius: 24px;
--pvz-board-radius-2: 21px;
--pvz-board-radius-3: 17px;
--pvz-board-radius-4: 13px;
--pvz-board-top-gap: 18px;
--pvz-board-paper-outer-gap: 22px;
--pvz-content-bg: #fff4ea;
--pvz-content-border: transparent;
--pvz-paper-radius: 12px;
--pvz-paper-side-padding: 30px;
--pvz-paper-bottom-padding: 24px;
--pvz-wiki-bg-image: url('/wiki/Special:Redirect/file/Wiki_Bg.png');
--pvz-wiki-bg-color: #69c369;
--pvz-title-ribbon: #3d8f45;
--pvz-title-color: #ffffff;
}
html,
body {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
scroll-padding-top: calc(var(--pvz-mobile-custombar-height) + 16px) !important;
}
body {
position: relative !important;
color: #203020 !important;
background-color: transparent !important;
background-image: none !important;
font-family: var(--pvz-body-font) !important;
}
body::before {
content: none !important;
display: none !important;
}
/* =========================
단일 위키 배경 이미지 v38
- 라이트/다크 모드 구분 없이 Wiki_Bg.png 하나만 사용
========================= */
/* 위키 배경 이미지 모드 구분 제거 시작 */
:root {
--pvz-wiki-bg-image: url('/wiki/Special:Redirect/file/Wiki_Bg.png');
--pvz-wiki-bg-color: #69c369;
}
/* 위키 배경 이미지 모드 구분 제거 끝 */
html.pvz-modern-ui body {
padding-top: calc(var(--pvz-mobile-custombar-height) + 10px) !important;
padding-bottom: 88px !important;
}
*,
*::before,
*::after {
box-sizing: border-box !important;
}
a {
color: #2f7f3a;
}
a:visited {
color: #3c7f3a;
}
/* Vector / Vector 2022 기본 UI 숨김 */
body.skin-vector #mw-page-base,
body.skin-vector #mw-head-base,
body.skin-vector #mw-head,
body.skin-vector #mw-panel,
body.skin-vector #p-personal,
body.skin-vector #p-search,
body.skin-vector #left-navigation,
body.skin-vector #right-navigation,
body.skin-vector .vector-header-container,
body.skin-vector .vector-sticky-header,
body.skin-vector .vector-main-menu-landmark,
body.skin-vector .vector-column-start,
body.skin-vector .vector-page-toolbar,
body.skin-vector .vector-page-titlebar,
body.skin-vector .vector-page-titlebar-toc,
body.skin-vector .vector-toc-landmark,
body.skin-vector-2022 #mw-page-base,
body.skin-vector-2022 #mw-head-base,
body.skin-vector-2022 #mw-head,
body.skin-vector-2022 #mw-panel,
body.skin-vector-2022 #p-personal,
body.skin-vector-2022 #p-search,
body.skin-vector-2022 #left-navigation,
body.skin-vector-2022 #right-navigation,
body.skin-vector-2022 .vector-header-container,
body.skin-vector-2022 .vector-sticky-header,
body.skin-vector-2022 .vector-main-menu-landmark,
body.skin-vector-2022 .vector-column-start,
body.skin-vector-2022 .vector-page-toolbar,
body.skin-vector-2022 .vector-page-titlebar,
body.skin-vector-2022 .vector-page-titlebar-toc,
body.skin-vector-2022 .vector-toc-landmark {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* 기본 제목/탭은 보드 헤더가 대체 */
body.pvz-board-ready #firstHeading,
body.pvz-board-ready .firstHeading,
body.pvz-board-ready .mw-first-heading,
body.pvz-board-ready #p-associated-pages,
body.pvz-board-ready #p-views,
body.pvz-board-ready #p-cactions,
body.pvz-board-ready .vector-page-toolbar,
body.pvz-board-ready .vector-page-titlebar,
body.pvz-board-ready .vector-page-titlebar-toc {
display: none !important;
}
#jump-to-nav,
.mw-jump-link {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* =========================
데스크톱 위키 배경 이미지 cover v23
- 반복 없음
- 화면 전체를 채우도록 cover
- 데스크톱 배경은 Wiki_Bg.png 단일 이미지 사용
========================= */
html,
body {
min-height: 100% !important;
}
html {
background-color: var(--pvz-wiki-bg-color) !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
background-attachment: fixed !important;
}
body {
background-color: transparent !important;
}
html.pvz-modern-ui body {
background-color: transparent !important;
background-image: none !important;
}
/* =========================
데스크톱 위키 배경 최종 보정 v24
- 실제 배경 이미지는 html에만 둔다.
- body에는 배경 이미지를 남기지 않아 중복/겹침을 방지한다.
========================= */
html {
background-color: var(--pvz-wiki-bg-color) !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
background-attachment: fixed !important;
}
body,
html.pvz-modern-ui body {
background-color: transparent !important;
background-image: none !important;
}
/* =========================
데스크톱 폭 / 상단 여백 조정 v27
- 기본 폭은 기존 '넓게'에 가깝게
- 넓게 선택 시 오른쪽으로 거의 꽉 차게
- 상단 전체 바 삭제에 맞춰 body 상단 여백 제거
========================= */
html.pvz-modern-ui body {
padding-top: 0 !important;
}
html.pvz-modern-ui {
scroll-padding-top: 18px !important;
}
html.pvz-width-normal {
--pvz-board-width: var(--pvz-board-width-normal) !important;
}
html.pvz-width-wide {
--pvz-board-width: var(--pvz-board-width-wide) !important;
}
/* =========================
v34 배경/폭 최종 보정
- 배경은 실제 파일 이미지만 사용한다.
- CSS로 하늘/언덕/프로필 표를 그리지 않는다.
========================= */
html {
background-color: var(--pvz-wiki-bg-color) !important;
background-image: var(--pvz-wiki-bg-image) !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
background-attachment: fixed !important;
}
body,
html.pvz-modern-ui body {
background-color: transparent !important;
background-image: none !important;
}
body::before {
content: none !important;
display: none !important;
}
/* =========================
v38 단일 위키 배경 이미지 최종 고정
- 뒤쪽 보정 블록에서 background-image가 none으로 덮이는 것을 방지한다.
- 라이트/다크 모드 구분 없이 Wiki_Bg.png 하나만 유지한다.
========================= */
/* 단일 위키 배경 이미지 최종 고정 시작 */
html {
--pvz-wiki-bg-image: url('/wiki/Special:Redirect/file/Wiki_Bg.png') !important;
background-image: var(--pvz-wiki-bg-image) !important;
}
/* 단일 위키 배경 이미지 최종 고정 끝 */
/* =========================
v37 데스크톱 초기 기본 Vector 노출 최소화
- JS가 보드 구조를 만들기 전 기본 Vector 본문/스킨이 잠깐 보이는 것을 막는다.
- 배경은 이미 custom 배경 변수로 먼저 표시한다.
========================= */
html:not(.pvz-desktop-booted) body.skin-vector,
html:not(.pvz-desktop-booted) body.skin-vector-2022 {
background-color: transparent !important;
}
html:not(.pvz-desktop-booted) body.skin-vector #content,
html:not(.pvz-desktop-booted) body.skin-vector .mw-body,
html:not(.pvz-desktop-booted) body.skin-vector #bodyContent,
html:not(.pvz-desktop-booted) body.skin-vector-2022 #content,
html:not(.pvz-desktop-booted) body.skin-vector-2022 .mw-body,
html:not(.pvz-desktop-booted) body.skin-vector-2022 #bodyContent {
visibility: hidden !important;
}
html:not(.pvz-desktop-booted) body.skin-vector #mw-page-base,
html:not(.pvz-desktop-booted) body.skin-vector #mw-head-base,
html:not(.pvz-desktop-booted) body.skin-vector #mw-head,
html:not(.pvz-desktop-booted) body.skin-vector #mw-panel,
html:not(.pvz-desktop-booted) body.skin-vector-2022 #mw-page-base,
html:not(.pvz-desktop-booted) body.skin-vector-2022 #mw-head-base,
html:not(.pvz-desktop-booted) body.skin-vector-2022 #mw-head,
html:not(.pvz-desktop-booted) body.skin-vector-2022 #mw-panel {
display: none !important;
}
/* ===== board.txt ===== */
/* =========================
MediaWiki:Gadget-pvz-core/board.css
Vector 호환 최종본 / 데스크톱 탭 아이콘·여백·더보기 보정 v50
========================= */
body.pvz-board-ready .pvz-board-root {
position: relative !important;
display: grid !important;
grid-template-columns: var(--pvz-board-side-width) minmax(0, var(--pvz-board-width)) !important;
column-gap: var(--pvz-board-side-gap) !important;
align-items: start !important;
width: calc(var(--pvz-board-side-width) + var(--pvz-board-side-gap) + var(--pvz-board-width)) !important;
max-width: calc(100vw - 12px) !important;
margin: 64px 8px 36px 8px !important;
padding: 0 !important;
color: inherit !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 재구성 뒤 남은 Vector 요소 숨김 */
body.pvz-board-ready .pvz-board-root > :not(.pvz-board-frame-outer-real):not(.pvz-board-left-rail):not(.pvz-page-logo-link):not(#pvz-page-logo-link) {
display: none !important;
}
/* =========================
왼쪽 보조창: 목재 보드 + 종이쪽지
========================= */
body.pvz-board-ready .pvz-board-left-rail {
position: sticky !important;
top: 10px !important;
z-index: 20 !important;
grid-column: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
width: var(--pvz-board-side-width) !important;
min-width: 0 !important;
max-width: var(--pvz-board-side-width) !important;
max-height: none !important;
margin: 0 !important;
padding: 12px 12px 16px !important;
background: #94431d !important;
background-image:
linear-gradient(90deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05)),
linear-gradient(#9d4a22, #853815) !important;
border: 3px solid #0c5f37 !important;
border-radius: 9px !important;
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.26),
inset 0 0 0 1px rgba(255, 220, 140, 0.12),
inset 0 0 24px rgba(80, 28, 8, 0.36) !important;
overflow-y: visible !important;
overflow-x: hidden !important;
}
body.pvz-board-ready .pvz-board-left-rail::before {
content: "" !important;
position: absolute !important;
inset: 7px !important;
border: 1px solid rgba(70, 26, 10, 0.34) !important;
border-radius: 6px !important;
pointer-events: none !important;
}
body.pvz-board-ready .pvz-board-left-rail > .pvz-page-logo-link,
body.pvz-board-ready .pvz-board-left-rail > #pvz-page-logo-link {
position: relative !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 136px !important;
margin: 0 !important;
padding: 14px !important;
background: #5f260d !important;
border: 2px solid #55200b !important;
border-radius: 9px !important;
box-shadow:
inset 0 6px 12px rgba(0, 0, 0, 0.28),
inset 0 -1px 0 rgba(255, 219, 150, 0.12),
0 2px 0 rgba(255, 197, 108, 0.14) !important;
overflow: hidden !important;
}
body.pvz-board-ready .pvz-board-left-rail > .pvz-page-logo-link::before,
body.pvz-board-ready .pvz-board-left-rail > #pvz-page-logo-link::before {
content: "" !important;
position: absolute !important;
inset: 18px 25px !important;
background: rgba(89, 128, 74, 0.32) !important;
border-radius: 4px !important;
box-shadow: inset 0 0 16px rgba(18, 62, 31, 0.28) !important;
}
body.pvz-board-ready .pvz-board-left-rail > .pvz-page-logo-link img,
body.pvz-board-ready .pvz-board-left-rail > #pvz-page-logo-link img {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 158px !important;
height: auto !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 왼쪽 보조창 제목과 종이쪽지 */
body.pvz-board-ready .pvz-board-side-nav {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.pvz-board-ready .pvz-board-side-section {
margin: 0 0 18px !important;
padding: 0 !important;
}
body.pvz-board-ready .pvz-board-side-section:last-child {
margin-bottom: 0 !important;
}
body.pvz-board-ready .pvz-board-side-title {
margin: 0 0 9px !important;
padding: 0 4px !important;
color: #d5ad45 !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 1.02rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
line-height: 1.18 !important;
letter-spacing: -0.03em !important;
text-align: center !important;
text-shadow:
rgba(61, 26, 9, 0.8) 1px 1px 0,
rgba(255, 224, 137, 0.28) 0 -1px 0 !important;
}
body.pvz-board-ready .pvz-board-side-paper {
position: relative !important;
margin: 0 3px !important;
padding: 13px 14px !important;
background: #ffd191 !important;
color: #302839 !important;
border: 2px solid #5c2b12 !important;
border-radius: 5px !important;
box-shadow:
0 5px 9px rgba(38, 17, 5, 0.32),
inset 0 1px 0 rgba(255,255,255,0.36),
inset 0 -3px 0 rgba(177, 94, 37, 0.10) !important;
}
body.pvz-board-ready .pvz-board-side-paper::before {
content: "" !important;
position: absolute !important;
inset: 3px !important;
border: 1px solid rgba(255, 237, 190, 0.28) !important;
border-radius: 3px !important;
pointer-events: none !important;
}
body.pvz-board-ready .pvz-board-side-link {
display: block !important;
margin: 0 !important;
padding: 4px 2px !important;
color: #302839 !important;
background: transparent !important;
border-radius: 5px !important;
text-decoration: none !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.90rem !important;
font-weight: var(--pvz-toc-item-weight, 400) !important;
line-height: 1.36 !important;
letter-spacing: -0.02em !important;
}
body.pvz-board-ready .pvz-board-side-link:hover {
color: #0e6b3f !important;
background: rgba(255, 250, 230, 0.36) !important;
text-decoration: none !important;
}
/* =========================
관련 문서 버튼/패널
========================= */
body.pvz-board-ready #pvz-side-toggle {
position: fixed !important;
top: 58px !important;
left: 0 !important;
z-index: 101080 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 54px !important;
margin: 0 !important;
padding: 0 !important;
color: #fff5dc !important;
background: #0e6b3f !important;
border: 0 !important;
border-radius: 0 14px 14px 0 !important;
box-shadow:
3px 4px 12px rgba(25, 75, 36, 0.22),
inset 0 1px 0 rgba(255,255,255,0.18) !important;
cursor: pointer !important;
transition:
transform 320ms ease,
background-color 180ms ease,
box-shadow 180ms ease !important;
}
body.pvz-related-open #pvz-side-toggle {
z-index: 101100 !important;
transform: translateX(360px) !important;
background: #094b2c !important;
}
html.pvz-related-open,
body.pvz-related-open {
overflow: hidden !important;
}
body.pvz-related-open::after {
content: "" !important;
position: fixed !important;
inset: 0 !important;
z-index: 101030 !important;
background: rgba(19, 55, 28, 0.28) !important;
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
pointer-events: auto !important;
}
body.pvz-board-ready .pvz-board-related-panel {
position: fixed !important;
top: 72px !important;
left: 18px !important;
z-index: 101070 !important;
display: block !important;
width: 340px !important;
max-width: calc(100vw - 72px) !important;
max-height: calc(100vh - 96px) !important;
margin: 0 !important;
padding: 14px !important;
color: #302839 !important;
background: #94431d !important;
border: 3px solid #0c5f37 !important;
border-radius: 10px !important;
box-shadow:
0 16px 36px rgba(20, 20, 10, 0.32),
inset 0 0 0 1px rgba(255, 220, 140, 0.14) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
opacity: 0 !important;
visibility: visible !important;
pointer-events: none !important;
transform: translateX(-42px) !important;
clip-path: inset(0 100% 0 0 round 10px) !important;
transition:
clip-path 320ms ease,
transform 320ms ease,
opacity 320ms ease !important;
}
body.pvz-related-open .pvz-board-related-panel {
z-index: 101090 !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translateX(0) !important;
clip-path: inset(0 0 0 0 round 10px) !important;
}
body.pvz-board-ready .pvz-board-related-title {
margin: 0 0 10px !important;
color: #d5ad45 !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 1.08rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
text-align: center !important;
text-shadow: rgba(61, 26, 9, 0.8) 1px 1px 0 !important;
}
body.pvz-board-ready .pvz-board-related-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
}
body.pvz-board-ready .pvz-related-card {
position: relative !important;
display: block !important;
min-height: 82px !important;
overflow: hidden !important;
background: #ffd191 !important;
border: 2px solid #5c2b12 !important;
border-radius: 6px !important;
box-shadow:
0 5px 9px rgba(38, 17, 5, 0.28),
inset 0 1px 0 rgba(255,255,255,0.28) !important;
text-decoration: none !important;
}
body.pvz-board-ready .pvz-related-card-media {
position: absolute !important;
inset: 0 !important;
background: transparent !important;
}
body.pvz-board-ready .pvz-related-card-media img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border: 0 !important;
box-shadow: none !important;
}
body.pvz-board-ready .pvz-related-card-media.is-empty,
body.pvz-board-ready .pvz-related-card-media.is-empty::before {
background: transparent !important;
content: none !important;
}
body.pvz-board-ready .pvz-related-card-titlebar {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 32px !important;
padding: 7px 10px !important;
color: #ffffff !important;
background: rgba(14, 107, 63, 0.94) !important;
border-top: 1px solid rgba(255,255,255,0.22) !important;
}
body.pvz-board-ready .pvz-related-card-title {
display: block !important;
max-width: 100% !important;
color: #ffffff !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.88rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
line-height: 1.1 !important;
text-align: center !important;
letter-spacing: -0.025em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-shadow:
#245d33 1px 0 0,
#245d33 0 1px 0,
#245d33 -1px 0 0,
#245d33 0 -1px 0,
#245d33 1px 1px 0,
#245d33 -1px 1px 0,
#245d33 1px -1px 0,
#245d33 -1px -1px 0 !important;
}
/* =========================
본문창
========================= */
body.pvz-board-ready .pvz-board-frame-outer-real {
position: relative !important;
grid-column: 2 !important;
width: var(--pvz-board-width) !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 56px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
body.pvz-board-ready .pvz-board-frame-third-real,
body.pvz-board-ready .pvz-board-frame-second-real,
body.pvz-board-ready .pvz-board-frame-inner-real {
width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
body.pvz-board-ready .pvz-board-body {
position: relative !important;
z-index: 1 !important;
min-height: calc(100vh - 126px) !important;
padding: 26px !important;
background: #e6d2b4 !important;
border: 9px solid #5d2108 !important;
border-radius: 18px !important;
box-shadow:
0 16px 26px rgba(47, 22, 8, 0.26),
inset 0 0 0 1px rgba(255, 246, 226, 0.32) !important;
overflow: visible !important;
}
body.pvz-board-ready .pvz-board-body::before {
content: "" !important;
position: absolute !important;
inset: 18px !important;
z-index: 0 !important;
background: #fffbea !important;
border-radius: 13px !important;
pointer-events: none !important;
}
/* 상단 탭 */
body.pvz-board-ready .pvz-board-head {
position: relative !important;
z-index: 5 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: end !important;
gap: 18px !important;
min-height: 0 !important;
margin: -56px 0 0 !important;
padding: 0 0 12px 0 !important;
}
body.pvz-board-ready .pvz-board-head-left {
min-width: 0 !important;
}
body.pvz-board-ready .pvz-board-title-ribbon {
display: inline-flex !important;
align-items: center !important;
min-height: 58px !important;
margin: 20px 0 8px -1px !important;
padding: 12px 52px 11px 24px !important;
color: #ffffff !important;
background: #0e6b3f !important;
border-radius: 0 !important;
clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%) !important;
font-family: var(--pvz-document-title-font) !important;
font-size: clamp(1.65rem, 2.15vw, 2.55rem) !important;
font-weight: var(--pvz-document-title-weight, 500) !important;
line-height: 1 !important;
letter-spacing: -0.045em !important;
white-space: nowrap !important;
text-shadow:
#245d33 2px 0 0,
#245d33 0 2px 0,
#245d33 -2px 0 0,
#245d33 0 -2px 0,
#245d33 1.45px 1.45px 0,
#245d33 -1.45px 1.45px 0,
#245d33 1.45px -1.45px 0,
#245d33 -1.45px -1.45px 0 !important;
}
body.pvz-board-ready .pvz-board-tabs,
body.pvz-board-ready .pvz-board-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
gap: 8px !important;
}
body.pvz-board-ready .pvz-board-actions {
justify-content: flex-end !important;
align-self: end !important;
padding-bottom: 8px !important;
}
body.pvz-board-ready .pvz-board-btn,
body.pvz-board-ready .pvz-board-more > summary,
body.pvz-board-ready .pvz-board-btn.is-tab {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
margin: 0 !important;
padding: 8px 13px !important;
color: #ffffff !important;
background: #7a3b24 !important;
border: 3px solid #5d2108 !important;
border-bottom: 0 !important;
border-radius: 14px 14px 0 0 !important;
box-shadow:
inset 0 1px 0 rgba(255, 220, 170, 0.22),
0 -2px 0 rgba(255, 220, 170, 0.10) inset !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.78rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
line-height: 1.2 !important;
text-decoration: none !important;
text-shadow:
#3c1709 1px 0 0,
#3c1709 0 1px 0,
#3c1709 -1px 0 0,
#3c1709 0 -1px 0 !important;
cursor: pointer !important;
list-style: none !important;
}
body.pvz-board-ready .pvz-board-btn:hover,
body.pvz-board-ready .pvz-board-btn:focus,
body.pvz-board-ready .pvz-board-btn:active,
body.pvz-board-ready .pvz-board-btn.is-current,
body.pvz-board-ready .pvz-board-btn.is-clicked,
body.pvz-board-ready .pvz-board-btn.selected,
body.pvz-board-ready .pvz-board-more > summary:hover,
body.pvz-board-ready .pvz-board-more > summary:focus,
body.pvz-board-ready .pvz-board-more > summary:active,
body.pvz-board-ready .pvz-board-more > summary.is-current,
body.pvz-board-ready .pvz-board-more > summary.is-clicked,
body.pvz-board-ready .pvz-board-more[open] > summary {
color: #ffffff !important;
background: #0e6b3f !important;
border-color: #5d2108 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 -2px 0 rgba(0,0,0,0.16) inset !important;
text-shadow:
#245d33 1px 0 0,
#245d33 0 1px 0,
#245d33 -1px 0 0,
#245d33 0 -1px 0 !important;
}
body.pvz-board-ready .pvz-board-more {
position: relative !important;
}
body.pvz-board-ready .pvz-board-more > summary::-webkit-details-marker {
display: none !important;
}
body.pvz-board-ready .pvz-board-more-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
z-index: 40 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 158px !important;
padding: 8px !important;
background: #ffd191 !important;
border: 2px solid #5d2108 !important;
border-radius: 8px !important;
box-shadow: 0 10px 24px rgba(47, 22, 8, 0.24) !important;
}
body.pvz-board-ready .pvz-board-more:not([open]) .pvz-board-more-menu {
display: none !important;
}
body.pvz-board-ready .pvz-board-more-menu a {
display: block !important;
padding: 8px 9px !important;
color: #302839 !important;
background: transparent !important;
border-radius: 5px !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.80rem !important;
font-weight: var(--pvz-toc-item-weight, 400) !important;
text-decoration: none !important;
}
body.pvz-board-ready .pvz-board-more-menu a:hover {
color: #0e6b3f !important;
background: rgba(255, 250, 230, 0.40) !important;
}
/* 본문 종이판 */
body.pvz-board-ready .pvz-board-paper {
position: relative !important;
z-index: 2 !important;
min-height: calc(100vh - 258px) !important;
margin: 0 !important;
padding: 22px 28px 26px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
body.pvz-board-ready .pvz-board-paper-main {
position: relative !important;
z-index: 1 !important;
min-height: 320px !important;
padding: 0 !important;
}
body.pvz-board-ready .pvz-board-paper-meta {
position: relative !important;
z-index: 1 !important;
margin: 18px 0 0 !important;
padding: 6px 0 0 !important;
}
/* 넓은 폭 */
html.pvz-width-wide body.pvz-board-ready .pvz-board-root {
width: calc(var(--pvz-board-side-width) + var(--pvz-board-side-gap) + var(--pvz-board-width)) !important;
max-width: calc(100vw - 12px) !important;
}
html.pvz-width-wide body.pvz-board-ready .pvz-board-frame-outer-real {
width: var(--pvz-board-width) !important;
}
/* 모바일 */
@media (max-width: 720px) {
body.pvz-board-ready .pvz-board-root {
grid-template-columns: 1fr !important;
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
margin: 76px auto 28px !important;
}
body.pvz-board-ready .pvz-board-left-rail,
body.pvz-board-ready #pvz-side-toggle {
display: none !important;
}
body.pvz-board-ready .pvz-board-frame-outer-real {
grid-column: 1 !important;
width: 100% !important;
margin-top: 0 !important;
}
body.pvz-board-ready .pvz-board-body {
min-height: 0 !important;
padding: 16px !important;
border-width: 6px !important;
border-radius: 16px !important;
}
body.pvz-board-ready .pvz-board-body::before {
inset: 11px !important;
border-radius: 10px !important;
}
body.pvz-board-ready .pvz-board-head {
display: block !important;
margin-top: 0 !important;
padding: 0 0 10px !important;
}
body.pvz-board-ready .pvz-board-title-ribbon {
min-height: 54px !important;
margin: 0 0 9px -1px !important;
padding: 11px 34px 11px 18px !important;
font-size: 1.55rem !important;
}
body.pvz-board-ready .pvz-board-actions {
justify-content: flex-start !important;
margin-top: 8px !important;
padding-bottom: 0 !important;
}
body.pvz-board-ready .pvz-board-paper {
min-height: 0 !important;
padding: 14px 14px 18px !important;
}
body.pvz-board-ready .pvz-board-related-panel,
body.pvz-related-open::after {
display: none !important;
content: none !important;
}
}
/* =========================
v34 최종 보정
- 본문창 오른쪽 풀폭
- 현재 탭은 참고 이미지의 '문서' 탭처럼 밝은 목재 탭
- 보조창은 두 번째 이미지처럼 목재판+종이쪽지 유지
- 배경/프로필 표는 CSS로 그리지 않음
========================= */
/* 오른쪽 끝까지 최대한 채움 */
body.pvz-board-ready .pvz-board-root {
width: calc(var(--pvz-board-side-width) + var(--pvz-board-side-gap) + var(--pvz-board-width)) !important;
max-width: calc(100vw - 4px) !important;
margin: 64px 0 36px 8px !important;
}
body.pvz-board-ready .pvz-board-frame-outer-real {
width: var(--pvz-board-width) !important;
max-width: none !important;
}
/* 보조창 그룹 순서/간격 고정: 둘러보기 → 문서 도구 → 위키 관리 */
body.pvz-board-ready .pvz-board-side-nav {
display: flex !important;
flex-direction: column !important;
}
body.pvz-board-ready .pvz-side-section-둘러보기 {
order: 1 !important;
}
body.pvz-board-ready .pvz-side-section-문서-도구 {
order: 2 !important;
}
body.pvz-board-ready .pvz-side-section-위키-관리 {
order: 3 !important;
}
/* 현재 들어와 있는 탭: 참고 이미지의 '문서' 탭처럼 밝은 목재 탭 */
body.pvz-board-ready .pvz-board-btn.is-current,
body.pvz-board-ready .pvz-board-btn.selected,
body.pvz-board-ready .pvz-board-more > summary.is-current {
color: #ffffff !important;
background: #b1847c !important;
border-color: #5d2108 !important;
min-height: 41px !important;
transform: translateY(1px) !important;
box-shadow:
inset 0 1px 0 rgba(255, 231, 205, 0.34),
inset 0 -3px 0 rgba(74, 29, 10, 0.18),
0 -2px 0 rgba(255, 220, 170, 0.14) inset !important;
text-shadow:
#3c1709 1px 0 0,
#3c1709 0 1px 0,
#3c1709 -1px 0 0,
#3c1709 0 -1px 0 !important;
}
/* hover나 클릭 임시 상태는 기존 녹색 포인트 유지. 단 현재 탭은 밝은 목재 탭을 우선한다. */
body.pvz-board-ready .pvz-board-btn.is-current:hover,
body.pvz-board-ready .pvz-board-btn.is-current:focus,
body.pvz-board-ready .pvz-board-btn.is-current:active,
body.pvz-board-ready .pvz-board-more > summary.is-current:hover,
body.pvz-board-ready .pvz-board-more > summary.is-current:focus,
body.pvz-board-ready .pvz-board-more > summary.is-current:active {
color: #ffffff !important;
background: #b1847c !important;
}
/* 즐겨찾기에 추가 문구가 줄바꿈되지 않게 */
body.pvz-board-ready .pvz-board-btn,
body.pvz-board-ready .pvz-board-more > summary {
white-space: nowrap !important;
}
/* 본문 안의 실제 캐릭터 프로필 표는 문서/틀이 담당한다.
여기서는 위치만 자연스럽게 유지하고, 완두콩 슈터 같은 표를 새로 그리지 않는다. */
body.pvz-board-ready .pvz-board-paper-main .pvz-cp-infobox {
position: relative !important;
}
/* 모바일 */
@media (max-width: 720px) {
body.pvz-board-ready .pvz-board-root {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
margin: 76px auto 28px !important;
}
body.pvz-board-ready .pvz-board-frame-outer-real {
max-width: 100% !important;
}
}
/* =========================
v37 최종 보정
- 데스크톱 보조창: 따라 내려오지 않음, 왼쪽 여백 추가, 크기 축소
- 관련 문서 창: 최상단 유지
- 모바일: 보조창 다시 표시
========================= */
/* 데스크톱 왼쪽 보조창 축소 + 왼쪽 여백 */
body.pvz-board-ready .pvz-board-root {
width: calc(var(--pvz-board-side-width) + var(--pvz-board-side-gap) + var(--pvz-board-width)) !important;
max-width: calc(100vw - 8px) !important;
margin: 252px 0 36px 38px !important;
}
body.pvz-board-ready .pvz-board-left-rail {
position: relative !important;
top: auto !important;
z-index: 20 !important;
width: var(--pvz-board-side-width) !important;
max-width: var(--pvz-board-side-width) !important;
height: auto !important;
max-height: none !important;
margin-top: 6px !important;
overflow-y: visible !important;
overflow-x: visible !important;
}
body.pvz-board-ready .pvz-board-left-rail > .pvz-page-logo-link,
body.pvz-board-ready .pvz-board-left-rail > #pvz-page-logo-link {
min-height: 132px !important;
padding: 12px 10px !important;
}
body.pvz-board-ready .pvz-board-left-rail > .pvz-page-logo-link img,
body.pvz-board-ready .pvz-board-left-rail > #pvz-page-logo-link img {
max-width: 128px !important;
}
body.pvz-board-ready .pvz-board-side-nav {
padding: 10px 10px 12px !important;
}
body.pvz-board-ready .pvz-board-side-title,
body.pvz-board-ready .pvz-board-related-title {
font-size: 0.84rem !important;
}
body.pvz-board-ready .pvz-board-side-link {
padding: 5px 7px !important;
font-size: 0.76rem !important;
}
/* 본문창 오른쪽 폭 유지 */
body.pvz-board-ready .pvz-board-frame-outer-real {
position: relative !important;
width: var(--pvz-board-width) !important;
max-width: none !important;
margin-top: 108px !important;
}
/* 제목바: 본문창 안쪽, 갈색 테두리 바로 옆 왼쪽 끝. 위쪽만 살짝 여백 */
body.pvz-board-ready .pvz-board-body {
position: relative !important;
overflow: visible !important;
}
body.pvz-board-ready .pvz-board-head {
position: absolute !important;
inset: 0 auto auto 0 !important;
z-index: 8 !important;
display: block !important;
width: 100% !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
body.pvz-board-ready .pvz-board-head-left {
display: contents !important;
}
body.pvz-board-ready .pvz-board-title-ribbon {
position: absolute !important;
top: 24px !important;
left: 0 !important;
z-index: 9 !important;
display: inline-flex !important;
align-items: center !important;
min-height: 58px !important;
max-width: calc(100% - 48px) !important;
margin: 0 !important;
padding: 12px 52px 11px 24px !important;
pointer-events: auto !important;
}
body.pvz-board-ready .pvz-board-paper {
padding: 104px 28px 26px !important;
}
/* 액션바: 본문창 바깥 바로 위 */
body.pvz-board-ready .pvz-board-tabs {
position: absolute !important;
left: 18px !important;
top: -41px !important;
z-index: 12 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
}
body.pvz-board-ready .pvz-board-actions {
position: absolute !important;
right: 18px !important;
top: -41px !important;
z-index: 12 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
justify-content: flex-end !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
}
/* 관련 문서 창: 본문창보다 항상 앞 */
body.pvz-related-open .pvz-board-left-rail {
position: relative !important;
z-index: 2147483000 !important;
}
body.pvz-related-open::after {
content: "" !important;
position: fixed !important;
inset: 0 !important;
z-index: 2147482500 !important;
background: rgba(19, 55, 28, 0.28) !important;
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
pointer-events: auto !important;
}
body.pvz-board-ready .pvz-board-related-panel {
z-index: 2147483100 !important;
}
body.pvz-related-open .pvz-board-related-panel {
position: fixed !important;
z-index: 2147483100 !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.pvz-related-open #pvz-side-toggle {
z-index: 2147483200 !important;
}
/* 닫힌 관련 문서 패널은 클릭 방해 금지 */
body.pvz-board-ready .pvz-board-related-panel {
pointer-events: none !important;
}
body.pvz-related-open .pvz-board-related-panel {
pointer-events: auto !important;
}
/* 현재 탭 디자인 유지 */
body.pvz-board-ready .pvz-board-btn.is-current,
body.pvz-board-ready .pvz-board-btn.selected,
body.pvz-board-ready .pvz-board-more > summary.is-current {
color: #ffffff !important;
background: #b1847c !important;
border-color: #5d2108 !important;
min-height: 41px !important;
transform: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 231, 205, 0.34),
inset 0 -3px 0 rgba(74, 29, 10, 0.18),
0 -2px 0 rgba(255, 220, 170, 0.14) inset !important;
text-shadow:
#3c1709 1px 0 0,
#3c1709 0 1px 0,
#3c1709 -1px 0 0,
#3c1709 0 -1px 0 !important;
}
body.pvz-board-ready .pvz-board-btn,
body.pvz-board-ready .pvz-board-more > summary {
white-space: nowrap !important;
}
/* 모바일: 보조창 다시 표시 */
@media (max-width: 720px) {
body.pvz-board-ready .pvz-board-root {
display: grid !important;
grid-template-columns: 1fr !important;
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
margin: 76px auto 28px !important;
}
body.pvz-board-ready .pvz-board-frame-outer-real {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 0 !important;
}
body.pvz-board-ready .pvz-board-left-rail {
grid-column: 1 !important;
grid-row: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
margin: 14px 0 0 !important;
padding: 0 !important;
}
body.pvz-board-ready .pvz-board-left-rail > .pvz-page-logo-link,
body.pvz-board-ready .pvz-board-left-rail > #pvz-page-logo-link {
display: none !important;
}
body.pvz-board-ready .pvz-board-side-nav {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 12px !important;
}
body.pvz-board-ready .pvz-board-side-section {
display: block !important;
}
body.pvz-board-ready .pvz-board-side-title {
font-size: 0.88rem !important;
}
body.pvz-board-ready .pvz-board-side-link {
font-size: 0.80rem !important;
}
body.pvz-board-ready #pvz-side-toggle,
body.pvz-board-ready .pvz-board-related-panel,
body.pvz-related-open::after {
display: none !important;
content: none !important;
}
body.pvz-board-ready .pvz-board-head {
position: relative !important;
display: block !important;
height: auto !important;
pointer-events: auto !important;
}
body.pvz-board-ready .pvz-board-head-left {
display: block !important;
}
body.pvz-board-ready .pvz-board-title-ribbon {
position: relative !important;
top: auto !important;
left: auto !important;
max-width: 100% !important;
margin: 0 0 9px -1px !important;
}
body.pvz-board-ready .pvz-board-tabs,
body.pvz-board-ready .pvz-board-actions {
position: static !important;
display: flex !important;
justify-content: flex-start !important;
margin-top: 8px !important;
}
body.pvz-board-ready .pvz-board-paper {
padding: 14px 14px 18px !important;
}
}
/* =========================
v38 관련 문서 카드형 패널
- 관련 문서 창을 body 직속 최상위 패널로 사용
- 화면 뒤쪽만 blur
- 카드: 흰 배경, 왼쪽 썸네일, 오른쪽 문서명
========================= */
/* 관련 문서가 열리면 문서 전체 스크롤은 잠그고 패널 안에서만 스크롤 */
html.pvz-related-open,
body.pvz-related-open {
overflow: hidden !important;
}
/* blur 막은 관련 문서 패널보다 뒤 */
body.pvz-related-open::after {
content: "" !important;
position: fixed !important;
inset: 0 !important;
z-index: 2147483000 !important;
background: rgba(0, 0, 0, 0.46) !important;
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
pointer-events: auto !important;
}
/* 관련 문서 패널 본체 */
body.pvz-board-ready .pvz-board-related-panel,
body #pvz-board-related-panel {
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: auto !important;
z-index: 2147483600 !important;
display: block !important;
width: min(560px, calc(100vw - 56px)) !important;
max-width: calc(100vw - 56px) !important;
height: 100vh !important;
max-height: 100vh !important;
margin: 0 !important;
padding: 24px 14px 34px !important;
color: #000000 !important;
background: #f1f1f1 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow:
18px 0 36px rgba(0, 0, 0, 0.24) !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-100%) !important;
clip-path: none !important;
transition:
transform 300ms ease !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
pointer-events: none !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 열렸을 때는 blur 막보다 위에 표시 */
body.pvz-related-open .pvz-board-related-panel,
body.pvz-related-open #pvz-board-related-panel {
z-index: 2147483600 !important;
transform: translateX(0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 제목은 스크린샷처럼 카드 목록 중심으로 보이게 숨김 */
body.pvz-board-ready .pvz-board-related-title,
body #pvz-board-related-panel .pvz-board-related-title {
display: none !important;
}
/* 세로 카드 목록 */
body.pvz-board-ready .pvz-board-related-list,
body #pvz-board-related-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* 카드: 흰 배경, 큰 둥근 모서리 */
body.pvz-board-ready .pvz-related-card,
body #pvz-board-related-panel .pvz-related-card {
position: relative !important;
display: grid !important;
grid-template-columns: 170px minmax(0, 1fr) !important;
align-items: center !important;
gap: 22px !important;
width: 100% !important;
min-height: 154px !important;
margin: 0 !important;
padding: 18px 20px !important;
color: #000000 !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: none !important;
text-decoration: none !important;
overflow: hidden !important;
}
/* 썸네일 */
body.pvz-board-ready .pvz-related-card-media,
body #pvz-board-related-panel .pvz-related-card-media {
position: relative !important;
inset: auto !important;
display: block !important;
width: 158px !important;
height: 158px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
}
body.pvz-board-ready .pvz-related-card-media img,
body #pvz-board-related-panel .pvz-related-card-media img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
body.pvz-board-ready .pvz-related-card-media.is-empty::before,
body #pvz-board-related-panel .pvz-related-card-media.is-empty::before {
content: none !important;
display: none !important;
}
/* 문서명 영역 */
body.pvz-board-ready .pvz-related-card-titlebar,
body #pvz-board-related-panel .pvz-related-card-titlebar {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #000000 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.pvz-board-ready .pvz-related-card-title,
body #pvz-board-related-panel .pvz-related-card-title {
display: block !important;
max-width: 100% !important;
color: #000000 !important;
font-family: var(--pvz-section-title-font) !important;
font-size: clamp(1.12rem, 2.2vw, 1.58rem) !important;
font-weight: 900 !important;
line-height: 1.18 !important;
letter-spacing: -0.04em !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
text-shadow: none !important;
}
/* 오른쪽 원형 화살표 */
body.pvz-board-ready #pvz-side-toggle {
position: fixed !important;
top: 52px !important;
left: 12px !important;
z-index: 2147483700 !important;
width: 46px !important;
height: 46px !important;
color: #ffffff !important;
background: #5a005a !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important;
transform: translateX(-50%) !important;
transition:
left 300ms ease,
transform 300ms ease,
background-color 180ms ease !important;
}
body.pvz-related-open #pvz-side-toggle {
left: min(560px, calc(100vw - 56px)) !important;
transform: translateX(-50%) !important;
z-index: 2147483700 !important;
background: #5a005a !important;
}
body.pvz-board-ready #pvz-side-toggle .pvz-icon {
width: 1.72em !important;
height: 1.72em !important;
color: #ffffff !important;
background-color: currentColor !important;
}
/* 모바일 대응 */
@media (max-width: 720px) {
body.pvz-board-ready .pvz-board-related-panel,
body #pvz-board-related-panel {
width: calc(100vw - 52px) !important;
max-width: calc(100vw - 52px) !important;
padding: 22px 12px 34px !important;
}
body.pvz-board-ready .pvz-board-related-list,
body #pvz-board-related-list {
gap: 22px !important;
}
body.pvz-board-ready .pvz-related-card,
body #pvz-board-related-panel .pvz-related-card {
grid-template-columns: 128px minmax(0, 1fr) !important;
gap: 18px !important;
min-height: 154px !important;
padding: 16px !important;
border-radius: 16px !important;
}
body.pvz-board-ready .pvz-related-card-media,
body #pvz-board-related-panel .pvz-related-card-media {
width: 128px !important;
height: 128px !important;
}
body.pvz-board-ready .pvz-related-card-title,
body #pvz-board-related-panel .pvz-related-card-title {
font-size: 1.25rem !important;
}
body.pvz-related-open #pvz-side-toggle {
left: calc(100vw - 52px) !important;
}
}
/* =========================
v39 관련 문서 버튼 색상 보정
========================= */
body.pvz-board-ready #pvz-side-toggle,
body.pvz-related-open #pvz-side-toggle {
color: #ffffff !important;
background: #479745 !important;
}
body.pvz-board-ready #pvz-side-toggle:hover,
body.pvz-board-ready #pvz-side-toggle:focus,
body.pvz-related-open #pvz-side-toggle:hover,
body.pvz-related-open #pvz-side-toggle:focus {
background: #2f7f3a !important;
outline: none !important;
}
@media (min-width: 721px) {
/* =========================
v47 데스크톱 탭/보조창 최종 보정
- 왼쪽 보조창은 자체 스크롤 없이 문서 흐름대로 아래로 길어진다.
- 오른쪽 액션 탭은 왼쪽 문서/토론 탭과 같은 높이 기준에 맞춘다.
- 선택되지 않은 탭 글자는 약간 회색으로 둔다.
========================= */
body.pvz-board-ready .pvz-board-tabs,
body.pvz-board-ready .pvz-board-actions {
top: -41px !important;
align-items: flex-end !important;
}
body.pvz-board-ready .pvz-board-btn,
body.pvz-board-ready .pvz-board-more > summary,
body.pvz-board-ready .pvz-board-btn.is-tab {
min-height: 41px !important;
color: #d8d2c9 !important;
}
body.pvz-board-ready .pvz-board-btn.is-current,
body.pvz-board-ready .pvz-board-btn.selected,
body.pvz-board-ready .pvz-board-more > summary.is-current,
body.pvz-board-ready .pvz-board-more[open] > summary,
body.pvz-board-ready .pvz-board-btn:hover,
body.pvz-board-ready .pvz-board-btn:focus,
body.pvz-board-ready .pvz-board-btn:active,
body.pvz-board-ready .pvz-board-more > summary:hover,
body.pvz-board-ready .pvz-board-more > summary:focus,
body.pvz-board-ready .pvz-board-more > summary:active {
color: #ffffff !important;
}
body.pvz-board-ready .pvz-board-left-rail {
height: auto !important;
max-height: none !important;
overflow-y: visible !important;
overflow-x: visible !important;
}
}
@media (min-width: 721px) {
/* =========================
v49 데스크톱 왼쪽 보조창 바깥 여백 실반영
- margin-left로 전체 보드를 미는 방식이 아니라,
grid 첫 번째 칸에 실제 빈 여백 칼럼을 만든다.
- 왼쪽 보조창은 2번째 칸, 본문창은 4번째 칸에 배치한다.
========================= */
body.pvz-board-ready {
--pvz-board-left-edge-gap: var(--pvz-board-side-gap);
--pvz-board-width-normal: calc(100vw - var(--pvz-board-left-edge-gap) - var(--pvz-board-side-width) - var(--pvz-board-side-gap) - 8px);
--pvz-board-width-wide: calc(100vw - var(--pvz-board-left-edge-gap) - var(--pvz-board-side-width) - var(--pvz-board-side-gap) - 4px);
}
html.pvz-width-normal body.pvz-board-ready {
--pvz-board-width: var(--pvz-board-width-normal) !important;
}
html.pvz-width-wide body.pvz-board-ready {
--pvz-board-width: var(--pvz-board-width-wide) !important;
}
body.pvz-board-ready .pvz-board-root,
html.pvz-width-wide body.pvz-board-ready .pvz-board-root {
grid-template-columns:
var(--pvz-board-left-edge-gap)
var(--pvz-board-side-width)
var(--pvz-board-side-gap)
minmax(0, var(--pvz-board-width)) !important;
column-gap: 0 !important;
width: calc(var(--pvz-board-left-edge-gap) + var(--pvz-board-side-width) + var(--pvz-board-side-gap) + var(--pvz-board-width)) !important;
max-width: calc(100vw - 4px) !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.pvz-board-ready .pvz-board-left-rail {
grid-column: 2 !important;
}
body.pvz-board-ready .pvz-board-frame-outer-real,
html.pvz-width-wide body.pvz-board-ready .pvz-board-frame-outer-real {
grid-column: 4 !important;
width: var(--pvz-board-width) !important;
}
}
@media (min-width: 721px) {
/* =========================
v50 데스크톱 탭/여백/더보기 패널 보정
- 왼쪽 보조창 왼쪽 여백 = 본문창과 보조창 사이 여백
- 액션바 탭 안의 SVG 아이콘 소형화
- 탭 글자 외곽선을 문서 제목 리본보다 작고 촘촘하게 보정
- 더보기 패널은 모바일 패널처럼 단순한 카드형으로 정리
========================= */
body.pvz-board-ready {
--pvz-board-left-edge-gap: var(--pvz-board-side-gap);
}
body.pvz-board-ready .pvz-board-btn,
body.pvz-board-ready .pvz-board-more > summary,
body.pvz-board-ready .pvz-board-btn.is-tab {
gap: 5px !important;
padding-left: 11px !important;
padding-right: 12px !important;
color: #d8d2c9 !important;
text-shadow:
#3c1709 0.75px 0 0,
#3c1709 0.65px 0.38px 0,
#3c1709 0.38px 0.65px 0,
#3c1709 0 0.75px 0,
#3c1709 -0.38px 0.65px 0,
#3c1709 -0.65px 0.38px 0,
#3c1709 -0.75px 0 0,
#3c1709 -0.65px -0.38px 0,
#3c1709 -0.38px -0.65px 0,
#3c1709 0 -0.75px 0,
#3c1709 0.38px -0.65px 0,
#3c1709 0.65px -0.38px 0 !important;
}
body.pvz-board-ready .pvz-board-btn .pvz-icon,
body.pvz-board-ready .pvz-board-more > summary .pvz-icon {
width: 0.94em !important;
height: 0.94em !important;
min-width: 0.94em !important;
min-height: 0.94em !important;
flex: 0 0 auto !important;
margin: 0 1px 0 0 !important;
color: currentColor !important;
vertical-align: -0.10em !important;
}
body.pvz-board-ready .pvz-board-btn-text {
display: inline-block !important;
min-width: 0 !important;
}
body.pvz-board-ready .pvz-board-btn.is-current,
body.pvz-board-ready .pvz-board-btn.selected,
body.pvz-board-ready .pvz-board-more > summary.is-current,
body.pvz-board-ready .pvz-board-more[open] > summary,
body.pvz-board-ready .pvz-board-btn:hover,
body.pvz-board-ready .pvz-board-btn:focus,
body.pvz-board-ready .pvz-board-btn:active,
body.pvz-board-ready .pvz-board-more > summary:hover,
body.pvz-board-ready .pvz-board-more > summary:focus,
body.pvz-board-ready .pvz-board-more > summary:active {
color: #ffffff !important;
}
body.pvz-board-ready .pvz-board-btn.is-current,
body.pvz-board-ready .pvz-board-btn.selected,
body.pvz-board-ready .pvz-board-more > summary.is-current,
body.pvz-board-ready .pvz-board-more[open] > summary {
text-shadow:
#3c1709 0.75px 0 0,
#3c1709 0.65px 0.38px 0,
#3c1709 0.38px 0.65px 0,
#3c1709 0 0.75px 0,
#3c1709 -0.38px 0.65px 0,
#3c1709 -0.65px 0.38px 0,
#3c1709 -0.75px 0 0,
#3c1709 -0.65px -0.38px 0,
#3c1709 -0.38px -0.65px 0,
#3c1709 0 -0.75px 0,
#3c1709 0.38px -0.65px 0,
#3c1709 0.65px -0.38px 0 !important;
}
body.pvz-board-ready .pvz-board-more-menu {
top: calc(100% + 7px) !important;
right: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 3px !important;
min-width: 154px !important;
padding: 7px !important;
color: #173417 !important;
background: rgba(247, 255, 243, 0.98) !important;
border: 1px solid rgba(9, 28, 75, 0.14) !important;
border-radius: 15px !important;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
body.pvz-board-ready .pvz-board-more-menu a {
display: block !important;
min-height: 34px !important;
padding: 8px 10px !important;
color: #173417 !important;
background: transparent !important;
border: 0 !important;
border-radius: 10px !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.80rem !important;
font-weight: var(--pvz-toc-item-weight, 400) !important;
line-height: 1.25 !important;
text-decoration: none !important;
text-shadow: none !important;
}
body.pvz-board-ready .pvz-board-more-menu a:hover,
body.pvz-board-ready .pvz-board-more-menu a:focus {
color: #173417 !important;
background: #e8f7df !important;
text-decoration: none !important;
}
}
/* ===== content.txt ===== */
/* =========================
MediaWiki:Gadget-content.css
========================= */
body.pvz-board-ready #mw-content-text {
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.pvz-board-ready #mw-content-text > .mw-parser-output {
display: flow-root !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.pvz-board-ready #mw-content-text > .mw-parser-output > :first-child {
margin-top: 0 !important;
}
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
scroll-margin-top: calc(var(--pvz-mobile-custombar-height) + 16px) !important;
}
/* 파일이 문장 앞에 있으면 이미지가 먼저 위에 출력 */
.mw-parser-output p > a.mw-file-description:first-child,
.mw-parser-output p > span.mw-default-size:first-child,
.mw-parser-output p > span.mw-image-border:first-child,
.mw-parser-output p > a.image:first-child {
display: block !important;
width: max-content !important;
max-width: 100% !important;
margin: 0 0 0.75em 0 !important;
float: none !important;
clear: both !important;
}
.mw-parser-output p > a.mw-file-description:first-child img,
.mw-parser-output p > a.image:first-child img {
display: block !important;
max-width: 100% !important;
height: auto !important;
}
.mw-parser-output img,
.mw-parser-output video,
.mw-parser-output canvas,
.mw-parser-output svg {
max-width: 100% !important;
height: auto !important;
}
.mw-parser-output table {
max-width: 100% !important;
}
/* 이미지 자체에 생기는 기본 테두리선 제거 */
.mw-parser-output img,
.mw-parser-output .image img,
.mw-parser-output .mw-file-element,
.mw-parser-output .thumbimage,
.mw-parser-output figure img,
.mw-parser-output figure[typeof~="mw:File"] img,
.mw-parser-output figure[typeof~="mw:Image"] img {
border: 0 !important;
box-shadow: none !important;
}
/* 썸네일/figure 래퍼 테두리선 제거 */
.mw-parser-output .thumbinner,
.mw-parser-output .thumb,
.mw-parser-output figure,
.mw-parser-output figure[typeof~="mw:File"],
.mw-parser-output figure[typeof~="mw:Image"],
.gallerybox .thumb,
li.gallerybox div.thumb {
border: 0 !important;
box-shadow: none !important;
}
/* 이미지 캡션 */
.mw-parser-output .thumbcaption,
.mw-parser-output figure figcaption,
.mw-parser-output figcaption,
.mw-parser-output .gallerytext,
.gallerybox .gallerytext {
background: #ecd8c7 !important;
background-color: #ecd8c7 !important;
}
/* 분류 / 마지막 수정 / 저작권 */
body.pvz-board-ready .pvz-board-paper-meta {
position: relative !important;
z-index: 1 !important;
margin: 16px 0 0 !important;
padding: 6px 0 0 !important;
color: #745440 !important;
font-size: .92rem !important;
line-height: 1.65 !important;
border-top: 0 !important;
}
body.pvz-board-ready .pvz-board-paper-meta:empty {
display: none !important;
}
body.pvz-board-ready .pvz-board-paper-meta a {
color: #3c7f3a !important;
}
body.pvz-board-ready .pvz-board-paper-meta #catlinks,
body.pvz-board-ready .pvz-board-paper-meta .catlinks {
margin: 0 0 12px !important;
padding: 0 0 10px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.pvz-board-ready .pvz-board-paper-meta .catlinks ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 8px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.pvz-board-ready .pvz-board-paper-meta .catlinks li {
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
}
body.pvz-board-ready .pvz-board-paper-meta .catlinks li a {
display: inline-block !important;
padding: 5px 10px !important;
color: #4b2a18 !important;
background: #f6ebdc !important;
border: 1px solid #cdae8f !important;
border-radius: 999px !important;
text-decoration: none !important;
}
/* =========================
문단 제목 / 커스텀 목차 폰트
========================= */
@font-face {
font-family: 'PVZ SB Aggro B';
src: url('/wiki/Special:Redirect/file/SB_Aggro_B.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PVZ SB Aggro M';
src: url('/wiki/Special:Redirect/file/SB_Aggro_M.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PVZ SB Aggro L';
src: url('/wiki/Special:Redirect/file/SB_Aggro_L.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* 문단 제목: SB Aggro M */
body.pvz-board-ready #mw-content-text .mw-parser-output h1,
body.pvz-board-ready #mw-content-text .mw-parser-output h2,
body.pvz-board-ready #mw-content-text .mw-parser-output h3,
body.pvz-board-ready #mw-content-text .mw-parser-output h4,
body.pvz-board-ready #mw-content-text .mw-parser-output h5,
body.pvz-board-ready #mw-content-text .mw-parser-output h6,
body.pvz-board-ready #mw-content-text .mw-parser-output h1 .mw-headline,
body.pvz-board-ready #mw-content-text .mw-parser-output h2 .mw-headline,
body.pvz-board-ready #mw-content-text .mw-parser-output h3 .mw-headline,
body.pvz-board-ready #mw-content-text .mw-parser-output h4 .mw-headline,
body.pvz-board-ready #mw-content-text .mw-parser-output h5 .mw-headline,
body.pvz-board-ready #mw-content-text .mw-parser-output h6 .mw-headline,
body.pvz-board-ready #mw-content-text .mw-parser-output .mw-heading,
body.pvz-board-ready #mw-content-text .mw-parser-output .mw-heading h1,
body.pvz-board-ready #mw-content-text .mw-parser-output .mw-heading h2,
body.pvz-board-ready #mw-content-text .mw-parser-output .mw-heading h3,
body.pvz-board-ready #mw-content-text .mw-parser-output .mw-heading h4,
body.pvz-board-ready #mw-content-text .mw-parser-output .mw-heading h5,
body.pvz-board-ready #mw-content-text .mw-parser-output .mw-heading h6,
body.pvz-board-ready .pvz-board-paper h1,
body.pvz-board-ready .pvz-board-paper h2,
body.pvz-board-ready .pvz-board-paper h3,
body.pvz-board-ready .pvz-board-paper h4,
body.pvz-board-ready .pvz-board-paper h5,
body.pvz-board-ready .pvz-board-paper h6,
body.pvz-board-ready .pvz-board-paper .mw-heading,
body.pvz-board-ready .pvz-board-paper .mw-headline {
font-family: 'PVZ SB Aggro M', 'SB Aggro M', 'SB 어그로 M', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-weight: normal !important;
}
/* =========================
커스텀 목차
========================= */
body.pvz-board-ready .pvz-custom-toc-wrap {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin-top: 18px !important;
margin-bottom: 22px !important;
padding: 0 !important;
}
/* 최소너비 설정 삭제: min-width 선언 자체를 두지 않는다. */
body.pvz-board-ready .pvz-custom-toc {
position: relative !important;
display: inline-block !important;
width: max-content !important;
max-width: 100% !important;
padding: 10px 12px 10px 18px !important;
color: #3a1a0d !important;
background: #ffffff !important;
border: 1px solid rgba(75, 42, 24, 0.38) !important;
border-radius: 2px !important;
box-sizing: border-box !important;
overflow: auto !important;
vertical-align: top !important;
}
body.pvz-board-ready .pvz-custom-toc-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 8px !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
/* '목차' 글자 */
body.pvz-board-ready .pvz-custom-toc-title {
margin: 0 !important;
color: #3a1a0d !important;
font-family: 'PVZ SB Aggro M', 'SB Aggro M', 'SB 어그로 M', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-size: 0.82rem !important;
font-weight: normal !important;
line-height: 1.25 !important;
}
body.pvz-board-ready .pvz-custom-toc-toggle {
appearance: none !important;
-webkit-appearance: none !important;
min-width: 46px !important;
min-height: 24px !important;
margin: 0 !important;
padding: 3px 7px !important;
color: #4b2a18 !important;
background: rgba(255, 244, 234, 0.78) !important;
border: 1px solid rgba(75, 42, 24, 0.28) !important;
border-radius: 2px !important;
font-family: 'PVZ SB Aggro M', 'SB Aggro M', 'SB 어그로 M', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-size: 0.70rem !important;
font-weight: normal !important;
line-height: 1.2 !important;
cursor: pointer !important;
}
body.pvz-board-ready .pvz-custom-toc-toggle:hover {
background: rgba(255, 244, 234, 1) !important;
}
body.pvz-board-ready .pvz-custom-toc.is-collapsed .pvz-custom-toc-list {
display: none !important;
}
body.pvz-board-ready .pvz-custom-toc-list {
display: block !important;
grid-template-columns: none !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 0 0 4px !important;
list-style: none !important;
}
body.pvz-board-ready .pvz-custom-toc-item {
display: block !important;
margin: 0 !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
list-style: none !important;
}
body.pvz-board-ready .pvz-custom-toc-item a {
display: grid !important;
grid-template-columns: auto minmax(0, max-content) !important;
align-items: baseline !important;
column-gap: 7px !important;
width: max-content !important;
max-width: 100% !important;
padding: 3px 0 !important;
color: #4b2a18 !important;
text-decoration: none !important;
font-family: 'PVZ SB Aggro L', 'SB Aggro L', 'SB 어그로 L', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-size: 0.74rem !important;
font-weight: normal !important;
line-height: 1.25 !important;
}
body.pvz-board-ready .pvz-custom-toc-item a:hover {
color: #2f7f3a !important;
text-decoration: underline !important;
}
body.pvz-board-ready .pvz-custom-toc-text {
font-family: 'PVZ SB Aggro L', 'SB Aggro L', 'SB 어그로 L', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-size: 0.74rem !important;
font-weight: normal !important;
}
/* 목차 번호는 SB Aggro B */
body.pvz-board-ready .pvz-custom-toc-number {
color: #7a4a28 !important;
font-family: 'PVZ SB Aggro B', 'SB Aggro B', 'SB 어그로 B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-size: 0.74rem !important;
font-weight: normal !important;
white-space: nowrap !important;
}
body.pvz-board-ready .pvz-custom-toc-number::after {
display: none !important;
content: none !important;
}
body.pvz-board-ready .pvz-custom-toc-depth-1 { padding-left: 0 !important; }
body.pvz-board-ready .pvz-custom-toc-depth-2 { padding-left: 18px !important; }
body.pvz-board-ready .pvz-custom-toc-depth-3 { padding-left: 36px !important; }
body.pvz-board-ready .pvz-custom-toc-depth-4 { padding-left: 54px !important; }
body.pvz-board-ready .pvz-custom-toc-depth-5 { padding-left: 72px !important; }
/* =========================
v11 클린 본문 보정
========================= */
body.pvz-board-ready #mw-content-text {
font-family: var(--pvz-body-font) !important;
font-size: 0.96rem !important;
line-height: 1.72 !important;
}
body.pvz-board-ready #mw-content-text .mw-parser-output h2,
body.pvz-board-ready #mw-content-text .mw-parser-output h3,
body.pvz-board-ready #mw-content-text .mw-parser-output h4,
body.pvz-board-ready #mw-content-text .mw-parser-output h5,
body.pvz-board-ready #mw-content-text .mw-parser-output h6 {
color: #215a31 !important;
border-bottom-color: rgba(61, 143, 69, 0.30) !important;
}
body.pvz-board-ready .pvz-custom-toc {
background: #ffffff !important;
border-color: rgba(61, 143, 69, 0.24) !important;
border-radius: 12px !important;
box-shadow:
0 5px 14px rgba(24, 86, 37, 0.08),
inset 0 1px 0 rgba(255,255,255,0.82) !important;
}
body.pvz-board-ready .pvz-custom-toc-title {
color: #215a31 !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.80rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
}
body.pvz-board-ready .pvz-custom-toc-toggle {
color: #215a31 !important;
background: #eef7e7 !important;
border-color: rgba(61, 143, 69, 0.24) !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.68rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
}
body.pvz-board-ready .pvz-custom-toc-item a,
body.pvz-board-ready .pvz-custom-toc-text,
body.pvz-board-ready .pvz-custom-toc-number {
font-size: 0.72rem !important;
line-height: 1.24 !important;
}
body.pvz-board-ready .pvz-custom-toc-number {
color: #3d8f45 !important;
font-family: var(--pvz-toc-number-font) !important;
font-weight: var(--pvz-toc-number-weight, 700) !important;
}
body.pvz-board-ready .pvz-custom-toc-item a:hover {
color: #215a31 !important;
}
/* =========================
식물 vs 좀비 위키 대문 폰트 지정 v12
TemplateStyles에서 font-family가 막히므로, 전역 가젯 CSS에서만 폰트를 지정한다.
B = PVZ SB Aggro B / M = PVZ SB Aggro M / L = PVZ SB Aggro L
========================= */
/* 기본 설명문·보조 UI: L */
body.pvz-board-ready .pvz-home-v2,
body.pvz-board-ready .pvz-home-v2 p,
body.pvz-board-ready .pvz-home-v2 .pvzv2-stats-row span,
body.pvz-board-ready .pvz-home-v2 .pvzv2-screen-caption,
body.pvz-board-ready .pvz-home-v2 .pvzv2-game-desc,
body.pvz-board-ready .pvz-home-v2 .pvzv2-map-card p,
body.pvz-board-ready .pvz-home-v2 .pvzv2-map-card div,
body.pvz-board-ready .pvz-home-v2 .pvzv2-board ul,
body.pvz-board-ready .pvz-home-v2 .pvzv2-tool-list a,
body.pvz-board-ready .pvz-home-v2 .pvzv2-timeline em,
body.pvz-board-ready .pvz-home-v2 .pvzv2-footer {
font-family: 'PVZ SB Aggro L', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-weight: 400 !important;
}
/* 버튼·중간 제목: M */
body.pvz-board-ready .pvz-home-v2 .pvzv2-kicker,
body.pvz-board-ready .pvz-home-v2 .pvzv2-hero-actions a,
body.pvz-board-ready .pvz-home-v2 .pvzv2-game-title,
body.pvz-board-ready .pvz-home-v2 .pvzv2-game-link,
body.pvz-board-ready .pvz-home-v2 .pvzv2-tool-list a:hover,
body.pvz-board-ready .pvz-home-v2 .pvzv2-timeline span,
body.pvz-board-ready .pvz-home-v2 .pvzv2-footer strong {
font-family: 'PVZ SB Aggro M', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-weight: 500 !important;
}
/* 큰 제목·강조 숫자·섹션 헤드: B */
body.pvz-board-ready .pvz-home-v2 .pvzv2-hero-main h1,
body.pvz-board-ready .pvz-home-v2 .pvzv2-stats-row b,
body.pvz-board-ready .pvz-home-v2 .pvzv2-section-head span,
body.pvz-board-ready .pvz-home-v2 .pvzv2-section-head h2,
body.pvz-board-ready .pvz-home-v2 .pvzv2-map-card strong,
body.pvz-board-ready .pvz-home-v2 .pvzv2-board h3,
body.pvz-board-ready .pvz-home-v2 .pvzv2-timeline b {
font-family: 'PVZ SB Aggro B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-weight: 700 !important;
}
/* ===== layout.txt ===== */
/* =========================
MediaWiki:Gadget-pvz-core/layout.css
MediaWiki:Gadget-pvz-core/layout.css
Vector 호환 최종본 / footer 하단 배경 확장 v28
========================= */
body.skin-vector,
body.skin-vector-2022 {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.skin-vector #content,
body.skin-vector .mw-body,
body.skin-vector-2022 #content,
body.skin-vector-2022 .mw-body {
position: relative !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
body.skin-vector #bodyContent,
body.skin-vector-2022 #bodyContent {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 검색바 아래 좌상단 로고 */
#pvz-page-logo-link,
.pvz-page-logo-link {
position: relative !important;
z-index: 100200 !important;
display: block !important;
width: clamp(168px, 18vw, 286px) !important;
max-width: calc(100vw - 32px) !important;
margin: 10px 0 12px 16px !important;
padding: 0 !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#pvz-page-logo-link img,
.pvz-page-logo-link img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================
데스크톱 footer 배경 박스 v26
- 좌우로 꽉 차는 #f2dfbf 직사각형
- footer 내부 링크/문구 간격 보정
========================= */
body.skin-vector #footer,
body.skin-vector .mw-footer,
body.skin-vector-2022 #footer,
body.skin-vector-2022 .mw-footer {
clear: both !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 34px calc(50% - 50vw) 0 calc(50% - 50vw) !important;
padding: 22px 28px 26px !important;
color: #3a1a0d !important;
background: #f2dfbf !important;
border: 0 !important;
border-top: 1px solid rgba(75, 42, 24, 0.22) !important;
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08) !important;
box-sizing: border-box !important;
}
body.skin-vector #footer ul,
body.skin-vector .mw-footer ul,
body.skin-vector-2022 #footer ul,
body.skin-vector-2022 .mw-footer ul {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px 20px !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.skin-vector #footer li,
body.skin-vector .mw-footer li,
body.skin-vector-2022 #footer li,
body.skin-vector-2022 .mw-footer li {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.55 !important;
}
body.skin-vector #footer a,
body.skin-vector .mw-footer a,
body.skin-vector-2022 #footer a,
body.skin-vector-2022 .mw-footer a {
margin: 0 !important;
padding: 0 !important;
color: #2f7f3a !important;
text-decoration: none !important;
}
body.skin-vector #footer a:hover,
body.skin-vector .mw-footer a:hover,
body.skin-vector-2022 #footer a:hover,
body.skin-vector-2022 .mw-footer a:hover {
text-decoration: underline !important;
}
/* =========================
데스크톱 footer 배지 우측 정렬 / hover v27
- Hosted by Miraheze / CC / Powered by MediaWiki 배지를 footer 박스 오른쪽에 정렬
- 마우스 hover 시 부드럽게 확대
========================= */
body.skin-vector #footer,
body.skin-vector .mw-footer,
body.skin-vector-2022 #footer,
body.skin-vector-2022 .mw-footer {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"info icons"
"places icons" !important;
column-gap: 24px !important;
row-gap: 8px !important;
align-items: center !important;
}
body.skin-vector #footer-info,
body.skin-vector .mw-footer-info,
body.skin-vector-2022 #footer-info,
body.skin-vector-2022 .mw-footer-info {
grid-area: info !important;
}
body.skin-vector #footer-places,
body.skin-vector .mw-footer-places,
body.skin-vector-2022 #footer-places,
body.skin-vector-2022 .mw-footer-places {
grid-area: places !important;
}
body.skin-vector #footer-icons,
body.skin-vector .mw-footer-icons,
body.skin-vector-2022 #footer-icons,
body.skin-vector-2022 .mw-footer-icons {
grid-area: icons !important;
justify-self: end !important;
align-self: center !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.skin-vector #footer-icons li,
body.skin-vector .mw-footer-icons li,
body.skin-vector-2022 #footer-icons li,
body.skin-vector-2022 .mw-footer-icons li {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
body.skin-vector #footer-icons a,
body.skin-vector #footer-icons img,
body.skin-vector .mw-footer-icons a,
body.skin-vector .mw-footer-icons img,
body.skin-vector-2022 #footer-icons a,
body.skin-vector-2022 #footer-icons img,
body.skin-vector-2022 .mw-footer-icons a,
body.skin-vector-2022 .mw-footer-icons img {
display: block !important;
}
body.skin-vector #footer-icons img,
body.skin-vector .mw-footer-icons img,
body.skin-vector-2022 #footer-icons img,
body.skin-vector-2022 .mw-footer-icons img {
width: auto !important;
max-width: 92px !important;
height: 42px !important;
object-fit: contain !important;
transform: scale(1) !important;
transform-origin: center center !important;
transition: transform 160ms ease, filter 160ms ease !important;
}
body.skin-vector #footer-icons a:hover img,
body.skin-vector .mw-footer-icons a:hover img,
body.skin-vector-2022 #footer-icons a:hover img,
body.skin-vector-2022 .mw-footer-icons a:hover img {
transform: scale(1.12) !important;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.24)) !important;
}
@media (max-width: 900px) {
body.skin-vector #footer,
body.skin-vector .mw-footer,
body.skin-vector-2022 #footer,
body.skin-vector-2022 .mw-footer {
grid-template-columns: 1fr !important;
grid-template-areas:
"icons"
"info"
"places" !important;
}
body.skin-vector #footer-icons,
body.skin-vector .mw-footer-icons,
body.skin-vector-2022 #footer-icons,
body.skin-vector-2022 .mw-footer-icons {
justify-self: start !important;
justify-content: flex-start !important;
}
}
/* =========================
v28 footer 하단 배경 확장
- body 하단 padding 때문에 footer 아래에 투명 영역이 남는 문제 보정
- footer 배경 박스가 화면 아래까지 이어지게 한다.
========================= */
html.pvz-modern-ui body.skin-vector #footer,
html.pvz-modern-ui body.skin-vector .mw-footer,
html.pvz-modern-ui body.skin-vector-2022 #footer,
html.pvz-modern-ui body.skin-vector-2022 .mw-footer {
margin-bottom: -88px !important;
padding-bottom: 114px !important;
min-height: 190px !important;
}
/* ===== mobile-css.txt ===== */
/* =========================
MediaWiki:Gadget-mobile.css
========================= */
/* 기존 v161 기준 문법 시작 */
@font-face {
font-family: 'PVZ SB Aggro M';
src: url('/wiki/Special:Redirect/file/SB_Aggro_M.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PVZ SB Aggro L';
src: url('/wiki/Special:Redirect/file/SB_Aggro_L.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--pvz-document-title-font: 'PVZ SB Aggro B', 'SB Aggro B', 'SB 어그로 B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-section-title-font: 'PVZ SB Aggro M', 'SB Aggro M', 'SB 어그로 M', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-toc-item-font: 'PVZ SB Aggro L', 'SB Aggro L', 'SB 어그로 L', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-toc-number-font: 'PVZ SB Aggro B', 'SB Aggro B', 'SB 어그로 B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-mobile-paper-bg: #fffbea;
--pvz-mobile-text: #3a1a0d;
--pvz-mobile-link: #2f7f3a;
--pvz-mobile-footer-text: #4b2a18;
--pvz-mobile-topbar-bg: #3f853d;
--pvz-search-bg: #fff8ed;
--pvz-search-border: #8a654b;
--pvz-search-text: #3a1a0d;
--pvz-search-placeholder: #8c705a;
--pvz-search-icon: #6b4328;
--pvz-search-button-bg: #ead5b5;
--pvz-search-button-hover: #dfc49b;
--pvz-search-focus: #c58f5c;
--pvz-search-suggestions-bg: #fff8ed;
--pvz-search-suggestion-hover: #f2dfbf;
--pvz-search-suggestion-active: #ead2aa;
--pvz-search-divider: rgba(92, 34, 7, 0.16);
--pvz-search-shadow: rgba(47, 22, 8, 0.18);
--pvz-mobile-topbar-border: #286222;
--pvz-account-panel-bg: #f2dfbf;
--pvz-account-heading-bg: #f4e7d1;
--pvz-account-muted: #6b4328;
--pvz-account-separator: rgba(92, 34, 7, 0.15);
--pvz-account-hover-bg: rgba(255, 255, 255, 0.30);
}
/* 단일 위키 배경 이미지 시작 */
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body {
--pvz-wiki-bg-image: url('/wiki/Special:Redirect/file/Wiki_Bg.png');
--pvz-wiki-bg-color: #9bd6ef;
}
/* 배경 이미지는 라이트/다크 모드와 관계없이 동일하게 유지한다.
배경색만 기존 모드별 fallback 값을 유지한다. */
@media (prefers-color-scheme: dark) {
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body {
--pvz-wiki-bg-color: #172414;
}
}
html.pvz-timeless-mobile-ready.skin-theme-clientpref-day,
html.pvz-timeless-mobile-ready.client-light-mode,
html.pvz-timeless-mobile-ready.theme-light,
html.pvz-timeless-mobile-ready.light,
html.pvz-timeless-mobile-ready body.skin-theme-clientpref-day,
html.pvz-timeless-mobile-ready body.client-light-mode,
html.pvz-timeless-mobile-ready body.theme-light,
html.pvz-timeless-mobile-ready body.light {
--pvz-wiki-bg-color: #9bd6ef;
}
html.pvz-timeless-mobile-ready.skin-theme-clientpref-night,
html.pvz-timeless-mobile-ready.client-dark-mode,
html.pvz-timeless-mobile-ready.mw-theme-night,
html.pvz-timeless-mobile-ready.theme-dark,
html.pvz-timeless-mobile-ready.dark,
html.pvz-timeless-mobile-ready body.skin-theme-clientpref-night,
html.pvz-timeless-mobile-ready body.client-dark-mode,
html.pvz-timeless-mobile-ready body.mw-theme-night,
html.pvz-timeless-mobile-ready body.theme-dark,
html.pvz-timeless-mobile-ready body.dark {
--pvz-wiki-bg-color: #172414;
}
/* 단일 위키 배경 이미지 끝 */
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body,
html.pvz-timeless-mobile-ready body.skin-timeless {
background-color: var(--pvz-wiki-bg-color) !important;
background-image: var(--pvz-wiki-bg-image) !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
background-attachment: scroll !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation {
background-color: transparent !important;
background-image: none !important;
}
body.skin-timeless #mw-content-text .mw-parser-output h1,
body.skin-timeless #mw-content-text .mw-parser-output h2,
body.skin-timeless #mw-content-text .mw-parser-output h3,
body.skin-timeless #mw-content-text .mw-parser-output h4,
body.skin-timeless #mw-content-text .mw-parser-output h5,
body.skin-timeless #mw-content-text .mw-parser-output h6,
body.skin-timeless #mw-content-text .mw-parser-output h1 .mw-headline,
body.skin-timeless #mw-content-text .mw-parser-output h2 .mw-headline,
body.skin-timeless #mw-content-text .mw-parser-output h3 .mw-headline,
body.skin-timeless #mw-content-text .mw-parser-output h4 .mw-headline,
body.skin-timeless #mw-content-text .mw-parser-output h5 .mw-headline,
body.skin-timeless #mw-content-text .mw-parser-output h6 .mw-headline,
body.skin-timeless #mw-content-text .mw-parser-output .mw-heading,
body.skin-timeless #mw-content-text .mw-parser-output .mw-heading h1,
body.skin-timeless #mw-content-text .mw-parser-output .mw-heading h2,
body.skin-timeless #mw-content-text .mw-parser-output .mw-heading h3,
body.skin-timeless #mw-content-text .mw-parser-output .mw-heading h4,
body.skin-timeless #mw-content-text .mw-parser-output .mw-heading h5,
body.skin-timeless #mw-content-text .mw-parser-output .mw-heading h6,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output h1,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output h2,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output h3,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output h4,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output h5,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output h6,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output .mw-heading,
html.pvz-timeless-mobile-ready body #mw-content-text .mw-parser-output .mw-headline {
font-family: var(--pvz-section-title-font) !important;
font-weight: normal !important;
}
body.skin-timeless #mw-content-text #toc,
body.skin-timeless #mw-content-text .toc,
html.pvz-timeless-mobile-ready body #mw-content-text #toc,
html.pvz-timeless-mobile-ready body #mw-content-text .toc {
display: none !important;
}
body.skin-timeless .pvz-custom-toc-wrap,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-wrap {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin-top: 17px !important;
margin-bottom: 22px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.skin-timeless .pvz-custom-toc,
html.pvz-timeless-mobile-ready body .pvz-custom-toc {
position: relative !important;
display: inline-block !important;
width: max-content !important;
min-width: 250px !important;
max-width: 100% !important;
padding: 10px 12px 10px 18px !important;
color: var(--pvz-mobile-text) !important;
background: var(--pvz-mobile-paper-bg) !important;
border: 1px solid rgba(75, 42, 24, 0.38) !important;
border-radius: 2px !important;
box-sizing: border-box !important;
overflow: auto !important;
vertical-align: top !important;
}
body.skin-timeless .pvz-custom-toc-head,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
body.skin-timeless .pvz-custom-toc-title,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-title {
margin: 0 !important;
color: var(--pvz-mobile-text) !important;
font-family: var(--pvz-section-title-font) !important;
font-weight: normal !important;
line-height: 1.25 !important;
}
body.skin-timeless .pvz-custom-toc-toggle,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-toggle {
appearance: none !important;
-webkit-appearance: none !important;
min-width: 52px !important;
min-height: 28px !important;
margin: 0 !important;
padding: 4px 8px !important;
color: #4b2a18 !important;
background: rgba(255, 255, 255, 0.34) !important;
border: 1px solid rgba(75, 42, 24, 0.32) !important;
border-radius: 2px !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.82rem !important;
font-weight: normal !important;
line-height: 1.2 !important;
cursor: pointer !important;
}
body.skin-timeless .pvz-custom-toc-toggle:hover,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-toggle:hover {
background: rgba(255, 255, 255, 0.58) !important;
}
body.skin-timeless .pvz-custom-toc.is-collapsed .pvz-custom-toc-list,
html.pvz-timeless-mobile-ready body .pvz-custom-toc.is-collapsed .pvz-custom-toc-list {
display: none !important;
}
body.skin-timeless .pvz-custom-toc-list,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-list {
display: block !important;
grid-template-columns: none !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 0 0 4px !important;
list-style: none !important;
}
body.skin-timeless .pvz-custom-toc-item,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-item {
display: block !important;
margin: 0 !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
list-style: none !important;
}
body.skin-timeless .pvz-custom-toc-item a,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-item a {
display: grid !important;
grid-template-columns: auto minmax(0, max-content) !important;
align-items: baseline !important;
column-gap: 8px !important;
width: max-content !important;
max-width: 100% !important;
padding: 4px 0 !important;
color: #4b2a18 !important;
line-height: 1.35 !important;
text-decoration: none !important;
font-family: var(--pvz-toc-item-font) !important;
font-weight: normal !important;
}
body.skin-timeless .pvz-custom-toc-item a:hover,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-item a:hover {
color: var(--pvz-mobile-link) !important;
text-decoration: underline !important;
}
body.skin-timeless .pvz-custom-toc-number,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-number {
color: #7a4a28 !important;
font-family: var(--pvz-toc-number-font) !important;
font-weight: normal !important;
white-space: nowrap !important;
}
body.skin-timeless .pvz-custom-toc-number::after,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-number::after {
display: none !important;
content: none !important;
}
body.skin-timeless .pvz-custom-toc-text,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-text {
font-family: var(--pvz-toc-item-font) !important;
font-weight: normal !important;
min-width: 0 !important;
}
body.skin-timeless .pvz-custom-toc-depth-1,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-1 { padding-left: 0 !important; }
body.skin-timeless .pvz-custom-toc-depth-2,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-2 { padding-left: 22px !important; }
body.skin-timeless .pvz-custom-toc-depth-3,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-3 { padding-left: 44px !important; }
body.skin-timeless .pvz-custom-toc-depth-4,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-4 { padding-left: 66px !important; }
body.skin-timeless .pvz-custom-toc-depth-5,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-5 { padding-left: 88px !important; }
@media (max-width: 640px) {
body.skin-timeless .pvz-custom-toc-wrap,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-wrap {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.skin-timeless .pvz-custom-toc,
html.pvz-timeless-mobile-ready body .pvz-custom-toc {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
body.skin-timeless .pvz-custom-toc-head,
body.skin-timeless .pvz-custom-toc-list,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-head,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-list {
width: 100% !important;
max-width: 100% !important;
}
body.skin-timeless .pvz-custom-toc-item a,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-item a {
width: 100% !important;
grid-template-columns: auto minmax(0, 1fr) !important;
}
body.skin-timeless .pvz-custom-toc-depth-1,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-1 { padding-left: 0 !important; }
body.skin-timeless .pvz-custom-toc-depth-2,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-2 { padding-left: 14px !important; }
body.skin-timeless .pvz-custom-toc-depth-3,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-3 { padding-left: 28px !important; }
body.skin-timeless .pvz-custom-toc-depth-4,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-4 { padding-left: 42px !important; }
body.skin-timeless .pvz-custom-toc-depth-5,
html.pvz-timeless-mobile-ready body .pvz-custom-toc-depth-5 { padding-left: 56px !important; }
}
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body {
--pvz-content-bg: transparent;
--pvz-mobile-paper-bg: transparent;
--pvz-mobile-frame-bg: #e6d3b3;
}
body.skin-timeless #mw-content,
body.skin-timeless #content,
body.skin-timeless .mw-body,
html.pvz-timeless-mobile-ready body #mw-content,
html.pvz-timeless-mobile-ready body #content,
html.pvz-timeless-mobile-ready body .mw-body {
background: var(--pvz-mobile-frame-bg, #e6d3b3) !important;
}
body.skin-timeless #bodyContent,
body.skin-timeless .mw-body-content,
body.skin-timeless #mw-content-text,
body.skin-timeless #mw-content-text > .mw-parser-output,
html.pvz-timeless-mobile-ready body #bodyContent,
html.pvz-timeless-mobile-ready body .mw-body-content,
html.pvz-timeless-mobile-ready body #mw-content-text,
html.pvz-timeless-mobile-ready body #mw-content-text > .mw-parser-output {
background: transparent !important;
}
html.pvz-timeless-mobile-ready body .pvz-tools-reordered {
margin-top: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-tools-moved-below-wiki {
margin-top: 10px !important;
}
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready .pvz-native-tools-hidden {
display: revert !important;
visibility: visible !important;
}
@media (max-width: 760px) {
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready .pvz-native-tools-hidden {
display: none !important;
visibility: hidden !important;
}
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools {
display: block !important;
margin: 12px 0 !important;
padding: 0 !important;
color: var(--pvz-mobile-text, #3a1a0d) !important;
background: var(--pvz-mobile-paper-bg, #f2dfbf) !important;
border: 1px solid rgba(75, 42, 24, 0.38) !important;
border-radius: 2px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-section {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid rgba(75, 42, 24, 0.22) !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-section:first-child {
border-top: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-heading {
margin: 0 !important;
padding: 13px 18px 12px !important;
color: #4b2a18 !important;
background: #f4e7d1 !important;
border-bottom: 1px solid rgba(75, 42, 24, 0.08) !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 1.02rem !important;
font-weight: normal !important;
line-height: 1.25 !important;
letter-spacing: -0.03em !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-list {
display: block !important;
margin: 0 !important;
padding: 13px 18px 17px !important;
list-style: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a {
display: block !important;
padding: 5px 0 !important;
color: #4b2a18 !important;
background: transparent !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 1.00rem !important;
font-weight: normal !important;
line-height: 1.42 !important;
letter-spacing: -0.025em !important;
text-decoration: none !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a:hover {
color: var(--pvz-mobile-link, #2f7f3a) !important;
text-decoration: underline !important;
}
@media (max-width: 640px) {
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools {
width: 100% !important;
max-width: 100% !important;
}
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
position: relative !important;
z-index: 1000 !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
color: #fff !important;
background: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid var(--pvz-mobile-topbar-border, #286222) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
overflow: visible !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header {
box-sizing: border-box !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack,
html.pvz-timeless-mobile-ready body.skin-timeless .color-bar,
html.pvz-timeless-mobile-ready body.skin-timeless .header-color-bar,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header-color-bar,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack .color-left,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack .color-middle,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack .color-right,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .color-left,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .color-middle,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .color-right,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container .color-left,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container .color-middle,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container .color-right,
html.pvz-timeless-mobile-ready body.skin-timeless [class~="color-left"],
html.pvz-timeless-mobile-ready body.skin-timeless [class~="color-middle"],
html.pvz-timeless-mobile-ready body.skin-timeless [class~="color-right"],
html.pvz-timeless-mobile-ready body.skin-timeless [class*="color-left"],
html.pvz-timeless-mobile-ready body.skin-timeless [class*="color-middle"],
html.pvz-timeless-mobile-ready body.skin-timeless [class*="color-right"] {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
overflow: hidden !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack {
border-top: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container a,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container button,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-ui-icon,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-ui-icon::before {
color: #fff !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #p-logo-text,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #p-logo-text a,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-logo,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-logo a,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-logo-wordmark,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-wiki-title,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-logo-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-logo-container a {
color: #ffffff !important;
font-family: var(--pvz-document-title-font) !important;
font-size: clamp(0.78rem, 2.5vw, 0.98rem) !important;
font-weight: normal !important;
line-height: 1.20 !important;
letter-spacing: -0.06em !important;
text-decoration: none !important;
white-space: nowrap !important;
text-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-logo-tagline {
display: none !important;
}
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title {
display: none !important;
align-items: center !important;
min-width: 0 !important;
height: 40px !important;
color: #ffffff !important;
font-family: var(--pvz-document-title-font) !important;
font-size: 1.02rem !important;
font-weight: normal !important;
line-height: 1.20 !important;
letter-spacing: -0.055em !important;
text-decoration: none !important;
white-space: nowrap !important;
text-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #p-personal,
html.pvz-timeless-mobile-ready body.skin-timeless #user-tools,
html.pvz-timeless-mobile-ready body.skin-timeless #personal,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-portlet-personal,
html.pvz-timeless-mobile-ready body.skin-timeless .personal-tools,
html.pvz-timeless-mobile-ready body.skin-timeless .user-links,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-user-links,
html.pvz-timeless-mobile-ready body.skin-timeless .timeless-user-tools,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-ui-icon-wikimedia-userAvatar,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-ui-icon-before.mw-ui-icon-wikimedia-userAvatar {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body #pvz-mobile-topbar,
html.pvz-timeless-mobile-ready body .pvz-mobile-topbar,
html.pvz-timeless-mobile-ready body .pvz-restored-topbar,
html.pvz-timeless-mobile-ready body #pvz-search-suggestions,
html.pvz-timeless-mobile-ready body .pvz-search-suggestions,
html.pvz-timeless-mobile-ready body .pvz-timeless-custom-topbar,
html.pvz-timeless-mobile-ready body .pvz-timeless-custom-search-form,
html.pvz-timeless-mobile-ready body .pvz-timeless-custom-search-input {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 검색 관련 문서 대표 이미지 시작 */
html.pvz-timeless-mobile-ready body .pvz-search-suggestion-link {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
transition: transform 150ms ease !important;
transform: translateX(0) !important;
will-change: transform !important;
}
html.pvz-timeless-mobile-ready body .pvz-search-suggestion-link:active,
html.pvz-timeless-mobile-ready body .pvz-search-suggestion-link.is-pvz-search-pressed {
transform: translateX(8px) !important;
}
html.pvz-timeless-mobile-ready body .pvz-search-suggestion-thumb {
display: none !important;
flex: 0 0 34px !important;
width: 34px !important;
height: 34px !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
html.pvz-timeless-mobile-ready body .pvz-search-suggestion-thumb.has-image {
display: inline-flex !important;
}
html.pvz-timeless-mobile-ready body .pvz-search-suggestion-thumb img {
display: block !important;
max-width: 34px !important;
max-height: 34px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
filter: drop-shadow(2px 3px 1px rgba(64, 48, 47, 0.25)) !important;
}
/* 검색 관련 문서 대표 이미지 끝 */
html.pvz-timeless-mobile-ready {
min-height: 100% !important;
background: transparent !important;
background-image: none !important;
background-attachment: fixed !important;
}
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body,
html.pvz-timeless-mobile-ready body.skin-timeless {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
html.pvz-timeless-mobile-ready body,
html.pvz-timeless-mobile-ready body.skin-timeless {
position: relative !important;
min-height: 100% !important;
background: transparent !important;
background-image: none !important;
}
html.pvz-timeless-mobile-ready body::before {
content: "" !important;
position: fixed !important;
inset: 0 !important;
z-index: -1 !important;
display: block !important;
background-color: var(--pvz-wiki-bg-color) !important;
background-image: var(--pvz-wiki-bg-image) !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
background-attachment: fixed !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body {
--pvz-mobile-outer-gap: 0px;
--pvz-mobile-outer-gap-top: 0px;
--pvz-mobile-inner-pad: clamp(7px, 1.6vw, 11px);
--pvz-mobile-article-pad: clamp(12px, 2.4vw, 18px);
--pvz-mobile-ribbon-pull: var(--pvz-mobile-inner-pad, 9px);
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
overflow-x: clip !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: var(--pvz-mobile-outer-gap-top, 0) var(--pvz-mobile-outer-gap, 0) var(--pvz-mobile-outer-gap, 0) !important;
background: var(--pvz-mobile-frame-bg, #e6d3b3) !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow-x: clip !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #bodyContent,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body-content {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: var(--pvz-mobile-inner-pad) !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text > .mw-parser-output {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container > *,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body,
html.pvz-timeless-mobile-ready body.skin-timeless #bodyContent,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body-content {
border-left: 0 !important;
border-right: 0 !important;
box-shadow: none !important;
}
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-outer-gap: 0px;
--pvz-mobile-outer-gap-top: 0px;
--pvz-mobile-inner-pad: 7px;
--pvz-mobile-ribbon-pull: var(--pvz-mobile-inner-pad, 7px);
}
}
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready .pvz-native-tools-hidden,
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready #mw-site-navigation > :not(.pvz-timeless-wide-rail),
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready #mw-related-navigation > :not(.pvz-timeless-wide-rail) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-section {
display: block !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
color: #4b2a18 !important;
background: #f2dfbf !important;
border: 1px solid rgba(75, 42, 24, 0.42) !important;
border-radius: 4px !important;
box-shadow:
0 5px 14px rgba(47, 22, 8, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
overflow: hidden !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-section:last-child {
margin-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-heading {
margin: 0 !important;
padding: 13px 18px 12px !important;
color: #4b2a18 !important;
background: #f4e7d1 !important;
border: 0 !important;
border-bottom: 1px solid rgba(75, 42, 24, 0.08) !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 1.06rem !important;
font-weight: normal !important;
line-height: 1.25 !important;
letter-spacing: -0.03em !important;
text-shadow: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-list {
display: block !important;
margin: 0 !important;
padding: 13px 18px 17px !important;
list-style: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a {
display: block !important;
padding: 5px 0 !important;
color: #4b2a18 !important;
background: transparent !important;
border-radius: 5px !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 1.00rem !important;
font-weight: normal !important;
line-height: 1.42 !important;
letter-spacing: -0.025em !important;
text-decoration: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a:hover {
color: #2f7f3a !important;
background: rgba(255, 255, 255, 0.32) !important;
text-decoration: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a.pvz-timeless-theme-toggle,
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle {
display: grid !important;
grid-template-columns: 22px auto !important;
align-items: center !important;
justify-content: start !important;
justify-items: start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
text-align: left !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a.pvz-timeless-theme-toggle .pvz-timeless-action-icon,
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle .pvz-timeless-action-icon,
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a.pvz-timeless-theme-toggle svg,
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle svg {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
grid-column: 1 !important;
grid-row: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item a.pvz-timeless-theme-toggle > span:not(.pvz-timeless-action-icon),
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle > span:not(.pvz-timeless-action-icon) {
grid-column: 2 !important;
grid-row: 1 !important;
display: inline-block !important;
width: auto !important;
min-width: max-content !important;
max-width: none !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
line-height: 1.38 !important;
}
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
display: block !important;
position: relative !important;
left: calc(-1 * var(--pvz-mobile-ribbon-pull, 9px)) !important;
box-sizing: border-box !important;
width: fit-content !important;
max-width: calc(100% + var(--pvz-mobile-ribbon-pull, 9px)) !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 4px 0 0 0 !important;
padding: 12px 30px 11px 24px !important;
color: #ffffff !important;
background: #0e6b3f !important;
border: 0 !important;
border-radius: 0 !important;
clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%) !important;
font-family: var(--pvz-document-title-font) !important;
font-size: clamp(1.58rem, 6.6vw, 2.26rem) !important;
font-weight: normal !important;
line-height: 1.12 !important;
letter-spacing: -0.055em !important;
text-align: left !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
hyphens: none !important;
text-shadow:
#245d33 1.4px 0 0,
#245d33 0 1.4px 0,
#245d33 -1.4px 0 0,
#245d33 0 -1.4px 0 !important;
}
html.pvz-timeless-mobile-ready body #firstHeading > *,
html.pvz-timeless-mobile-ready body .firstHeading > *,
html.pvz-timeless-mobile-ready body .mw-first-heading > *,
html.pvz-timeless-mobile-ready body #firstHeading .mw-page-title-main,
html.pvz-timeless-mobile-ready body #firstHeading .mw-page-title-namespace,
html.pvz-timeless-mobile-ready body #firstHeading .mw-page-title-separator,
html.pvz-timeless-mobile-ready body .mw-first-heading .mw-page-title-main,
html.pvz-timeless-mobile-ready body .mw-first-heading .mw-page-title-namespace,
html.pvz-timeless-mobile-ready body .mw-first-heading .mw-page-title-separator {
display: inline !important;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: none !important;
white-space: inherit !important;
word-break: inherit !important;
overflow-wrap: inherit !important;
line-height: inherit !important;
}
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
left: calc(-1 * var(--pvz-mobile-ribbon-pull, 7px)) !important;
max-width: calc(100% + var(--pvz-mobile-ribbon-pull, 7px)) !important;
margin-top: 3px !important;
margin-bottom: 0 !important;
padding: 10px 26px 10px 20px !important;
font-size: clamp(1.42rem, 7.15vw, 1.88rem) !important;
line-height: 1.14 !important;
clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0 100%) !important;
}
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 8px !important;
padding: 0 2px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions-left,
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions-right {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions-left {
grid-column: 1 !important;
justify-self: start !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions-right {
grid-column: 3 !important;
justify-self: end !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action {
appearance: none !important;
-webkit-appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
min-width: 46px !important;
width: 46px !important;
height: 39px !important;
margin: 0 !important;
padding: 0 8px !important;
color: #8a654b !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
cursor: pointer !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action:hover,
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action:focus,
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action.is-active,
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action.is-current {
color: #6d4a32 !important;
background: transparent !important;
outline: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action.is-current::after {
content: "" !important;
position: absolute !important;
left: 8px !important;
right: 8px !important;
bottom: 1px !important;
height: 2px !important;
background: currentColor !important;
border-radius: 999px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action-icon,
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action-icon svg {
display: block !important;
width: 23px !important;
height: 23px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action-icon svg {
fill: currentColor !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action-more {
display: inline-flex !important;
}
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action-more {
display: none !important;
}
}
@media (max-width: 760px) {
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions {
gap: 8px !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions-left,
html.pvz-timeless-mobile-ready body .pvz-timeless-page-actions-right {
gap: 6px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action {
min-width: 42px !important;
width: 42px !important;
height: 37px !important;
padding-left: 7px !important;
padding-right: 7px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action-icon,
html.pvz-timeless-mobile-ready body .pvz-timeless-page-action-icon svg {
width: 22px !important;
height: 22px !important;
}
}
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions {
position: absolute !important;
z-index: 6 !important;
display: grid !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-button {
appearance: none !important;
-webkit-appearance: none !important;
position: relative !important;
display: grid !important;
place-items: center !important;
width: 52px !important;
height: 46px !important;
margin: 0 !important;
padding: 2px !important;
color: #e8ffe0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
pointer-events: auto !important;
cursor: pointer !important;
line-height: 0 !important;
vertical-align: top !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-button:hover,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-button:focus,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-button.is-active {
color: #f6fff1 !important;
background: transparent !important;
outline: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-icon {
position: absolute !important;
left: 50% !important;
top: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 26px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
transform: translate(-50%, -50%) !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-icon svg {
display: block !important;
width: 26px !important;
height: 26px !important;
margin: 0 !important;
padding: 0 !important;
fill: currentColor !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-panel-backdrop {
position: fixed !important;
inset: 0 !important;
z-index: 101430 !important;
display: block !important;
background: rgba(18, 32, 22, 0.28) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition:
opacity 220ms ease,
visibility 0s linear 220ms !important;
}
html.pvz-timeless-panel-open body .pvz-timeless-panel-backdrop,
html.pvz-timeless-mobile-ready body.pvz-timeless-panel-open .pvz-timeless-panel-backdrop {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition:
opacity 220ms ease,
visibility 0s linear 0s !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet {
position: absolute !important;
z-index: 101520 !important;
display: block !important;
width: min(236px, calc(100vw - 18px)) !important;
max-height: none !important;
padding: 0 !important;
overflow: visible !important;
-webkit-overflow-scrolling: auto !important;
color: var(--pvz-mobile-text, #3a1a0d) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
transition:
opacity 220ms ease,
visibility 0s linear 220ms !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet.is-open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition:
opacity 220ms ease,
visibility 0s linear 0s !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-browse,
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-settings,
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-document,
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-alerts,
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-account {
top: 58px !important;
left: 8px !important;
right: auto !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-account {
width: min(236px, calc(100vw - 16px)) !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-header,
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-close {
display: none !important;
content: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-body {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet .pvz-custom-mobile-tools-section {
border: 0 !important;
border-radius: 0 !important;
box-shadow:
0 7px 18px rgba(47, 22, 8, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet .pvz-custom-mobile-tools-heading {
padding: 9px 13px 8px !important;
font-size: 1.00rem !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet .pvz-custom-mobile-tools-list {
padding: 9px 13px 11px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet .pvz-custom-mobile-tools-item a {
padding: 5px 0 !important;
font-size: 1.00rem !important;
line-height: 1.38 !important;
}
/* 계정 패널 정돈 시작 */
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-section[data-pvz-tools-section="account"] {
margin: 0 !important;
background: var(--pvz-account-panel-bg) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow:
0 6px 15px rgba(47, 22, 8, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
overflow: hidden !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-heading {
padding: 10px 14px 9px !important;
font-size: 1.02rem !important;
line-height: 1.25 !important;
background: var(--pvz-account-heading-bg) !important;
border-bottom: 1px solid var(--pvz-account-separator) !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-account-info {
display: grid !important;
gap: 6px !important;
margin: 0 14px !important;
padding: 10px 0 11px !important;
border-bottom: 1px solid var(--pvz-account-separator) !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-account-info-row {
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: start !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-account-info-label {
color: var(--pvz-account-muted) !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.78rem !important;
line-height: 1.38 !important;
white-space: nowrap !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-account-info-value {
min-width: 0 !important;
color: var(--pvz-mobile-text, #3a1a0d) !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.82rem !important;
line-height: 1.42 !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-list {
display: block !important;
margin: 0 !important;
padding: 7px 10px 10px !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item a {
display: block !important;
padding: 7px 9px !important;
border-radius: 5px !important;
font-size: 0.93rem !important;
line-height: 1.34 !important;
letter-spacing: -0.025em !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item a:hover {
color: var(--pvz-mobile-link) !important;
background: var(--pvz-account-hover-bg) !important;
text-decoration: none !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item:first-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item:first-child a {
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.93rem !important;
font-weight: normal !important;
background: transparent !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item:last-child {
margin-top: 6px !important;
padding-top: 6px !important;
border-top: 1px solid var(--pvz-account-separator) !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item a.pvz-timeless-theme-toggle,
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 7px !important;
width: 100% !important;
min-width: 0 !important;
white-space: nowrap !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle .pvz-timeless-action-icon,
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle svg {
flex: 0 0 18px !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
margin: 0 !important;
}
html.pvz-timeless-mobile-ready body
.pvz-timeless-sheet-account
.pvz-custom-mobile-tools-item .pvz-timeless-theme-toggle > span:not(.pvz-timeless-action-icon) {
display: inline-block !important;
flex: 0 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
/* 계정 패널 정돈 끝 */
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-alerts {
width: min(236px, calc(100vw - 18px)) !important;
color: var(--pvz-mobile-text, #3a1a0d) !important;
background: transparent !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-alert-empty {
display: block !important;
margin: 0 !important;
padding: 5px 0 !important;
color: #5b3b27 !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 1.00rem !important;
font-weight: normal !important;
line-height: 1.38 !important;
letter-spacing: -0.025em !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet-alerts .pvz-custom-mobile-tools-section {
margin-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box {
display: none !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box .pvz-custom-mobile-tools-section {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box .pvz-custom-mobile-tools-heading {
display: none !important;
content: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box .pvz-custom-mobile-tools-list {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 8px 10px !important;
line-height: 1.45 !important;
column-count: 1 !important;
columns: auto !important;
white-space: normal !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box .pvz-custom-mobile-tools-list::before {
content: "분류:" !important;
display: inline !important;
margin: 0 6px 0 0 !important;
color: #4b2a18 !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.90rem !important;
line-height: 1.45 !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box .pvz-custom-mobile-tools-item {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box .pvz-custom-mobile-tools-item:not(:last-child)::after {
content: " | " !important;
display: inline !important;
margin: 0 !important;
color: #8a654b !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box .pvz-custom-mobile-tools-item a {
display: inline !important;
padding: 0 !important;
font-size: 0.90rem !important;
line-height: 1.45 !important;
}
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body {
--pvz-wide-left-col: 158px;
--pvz-wide-right-col: 158px;
--pvz-wide-col-gap: clamp(15px, 0.99vw, 21px);
--pvz-wide-page-pad: clamp(9px, 0.975vw, 15px);
--pvz-wide-logo-width: 139px;
--pvz-wide-side-top: 0px;
--pvz-wide-rail-top-gap: clamp(12px, 1.05vw, 18px);
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
min-height: 50px !important;
padding-right: 112px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions {
top: 50% !important;
right: 10px !important;
left: auto !important;
width: 94px !important;
height: 44px !important;
grid-template-columns: 44px 44px !important;
gap: 6px !important;
align-items: center !important;
transform: translateY(-50%) !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-settings,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-document {
display: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-alerts,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-account {
display: inline-flex !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-alerts {
grid-column: 1 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-account {
grid-column: 2 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #p-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-portlet-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-box,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container form[role="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchform,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-form {
max-width: calc(100vw - 136px) !important;
margin-right: 108px !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns:
minmax(0, var(--pvz-wide-left-col))
minmax(0, 1fr)
minmax(0, var(--pvz-wide-right-col)) !important;
grid-template-areas: "pvz-left pvz-main pvz-right" !important;
column-gap: var(--pvz-wide-col-gap) !important;
row-gap: 0 !important;
align-items: start !important;
justify-items: stretch !important;
direction: ltr !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 var(--pvz-wide-page-pad) 0 !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block {
display: contents !important;
box-sizing: border-box !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
direction: ltr !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
box-sizing: border-box !important;
grid-area: pvz-main !important;
grid-column: 2 / 3 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: start !important;
min-width: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-top: 0 !important;
float: none !important;
clear: none !important;
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
direction: ltr !important;
z-index: 2 !important;
overflow-x: clip !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation {
box-sizing: border-box !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-top: var(--pvz-wide-side-top, 0px) !important;
margin-bottom: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
align-self: start !important;
justify-self: stretch !important;
direction: ltr !important;
text-align: left !important;
z-index: 1 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
pointer-events: auto !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation {
grid-area: pvz-left !important;
grid-column: 1 / 2 !important;
grid-row: 1 !important;
order: 1 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation {
grid-area: pvz-right !important;
grid-column: 3 / 4 !important;
grid-row: 1 !important;
order: 3 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block > #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper > #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content > #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #content > #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body > #mw-site-navigation {
grid-area: pvz-left !important;
grid-column: 1 / 2 !important;
grid-row: 1 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: var(--pvz-wide-side-top, 0px) 0 0 !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block > #mw-related-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper > #mw-related-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content > #mw-related-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #content > #mw-related-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body > #mw-related-navigation {
grid-area: pvz-right !important;
grid-column: 3 / 4 !important;
grid-row: 1 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: var(--pvz-wide-side-top, 0px) 0 0 !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready #mw-site-navigation > :not(.pvz-timeless-wide-rail),
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready #mw-related-navigation > :not(.pvz-timeless-wide-rail) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail {
box-sizing: border-box !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
direction: ltr !important;
text-align: left !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
pointer-events: auto !important;
}
html.pvz-timeless-mobile-ready body #mw-site-navigation .pvz-timeless-wide-rail,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail-left {
margin-left: 0 !important;
margin-right: 0 !important;
justify-self: stretch !important;
}
html.pvz-timeless-mobile-ready body #mw-related-navigation .pvz-timeless-wide-rail,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail-right {
margin-left: 0 !important;
margin-right: 0 !important;
justify-self: stretch !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail-left,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail-right {
margin-left: 0 !important;
margin-right: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-section {
margin-bottom: 0 !important;
border-width: 1px !important;
border-radius: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-section:not(:last-child) {
margin-bottom: var(--pvz-wide-col-gap) !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-heading {
padding: 8px 10px 8px !important;
font-size: 0.84rem !important;
line-height: 1.24 !important;
letter-spacing: -0.035em !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-list {
padding: 8px 10px 10px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-item a {
padding: 3.5px 0 !important;
font-size: 0.80rem !important;
line-height: 1.40 !important;
letter-spacing: -0.03em !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 0 8px !important;
padding: 0 !important;
float: none !important;
clear: none !important;
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-logo img {
display: block !important;
width: var(--pvz-wide-logo-width) !important;
height: auto !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation {
margin-top: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation {
margin-top: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation .pvz-timeless-wide-logo {
margin-top: var(--pvz-wide-rail-top-gap, 16px) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation .pvz-timeless-wide-rail {
margin-top: var(--pvz-wide-rail-top-gap, 16px) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
margin-top: 0 !important;
padding-top: 0 !important;
}
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
margin-top: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container {
position: relative !important;
z-index: 0 !important;
clear: both !important;
margin-top: 0 !important;
}
}
@media (min-width: 1440px) {
html.pvz-timeless-mobile-ready body {
--pvz-wide-left-col: 158px;
--pvz-wide-right-col: 158px;
--pvz-wide-col-gap: clamp(18px, 1.0875vw, 25.5px);
--pvz-wide-page-pad: clamp(12px, 1.05vw, 18px);
--pvz-wide-logo-width: 139px;
--pvz-wide-rail-top-gap: clamp(14px, 1.15vw, 22px);
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-logo {
margin-bottom: 9px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-heading {
padding: 8px 10px 8px !important;
font-size: 0.84rem !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-list {
padding: 8px 10px 10px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-item a {
font-size: 0.80rem !important;
line-height: 1.34 !important;
}
}
@media (min-width: 1800px) {
html.pvz-timeless-mobile-ready body {
--pvz-wide-left-col: 158px;
--pvz-wide-right-col: 158px;
--pvz-wide-col-gap: clamp(22.5px, 1.275vw, 33px);
--pvz-wide-page-pad: clamp(15px, 1.2vw, 24px);
--pvz-wide-logo-width: 139px;
--pvz-wide-rail-top-gap: clamp(16px, 1.1vw, 24px);
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-section {
border-width: 1px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-heading {
padding: 8px 10px 8px !important;
font-size: 0.84rem !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-list {
padding: 8px 10px 10px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-item a {
font-size: 0.80rem !important;
line-height: 1.34 !important;
}
}
@media (min-width: 1281px) and (max-width: 1440px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-outer-gap-top: clamp(7px, 0.85vw, 11px);
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
padding-top: var(--pvz-mobile-outer-gap-top, 9px) !important;
}
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
margin-top: 0 !important;
}
}
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse {
display: none !important;
}
}
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse {
display: grid !important;
}
}
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
left: auto !important;
right: auto !important;
transform: none !important;
overflow-x: clip !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
left: auto !important;
right: auto !important;
transform: none !important;
overflow-x: clip !important;
}
}
@media (min-width: 901px) and (max-width: 1280px) {
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-logo {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: clip !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: var(--pvz-mobile-outer-gap-top, 3px) var(--pvz-mobile-outer-gap) var(--pvz-mobile-outer-gap) !important;
overflow-x: clip !important;
}
}
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body,
html.pvz-timeless-mobile-ready body.skin-timeless {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
float: none !important;
clear: both !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
width: 100% !important;
max-width: 100% !important;
min-height: 59px !important;
margin: 0 !important;
padding: 4px 7px 3px !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header {
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless .sidebar-chunk,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-navigation,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-logo,
html.pvz-timeless-mobile-ready body.skin-timeless #p-logo,
html.pvz-timeless-mobile-ready body.skin-timeless #p-logo-text,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-logo,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-logo-container,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-wiki-title {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title {
position: absolute !important;
left: 48px !important;
right: 200px !important;
top: 4px !important;
z-index: 7 !important;
display: flex !important;
align-items: center !important;
height: 34px !important;
font-size: 0.95rem !important;
overflow: visible !important;
text-overflow: ellipsis !important;
line-height: 1.10 !important;
pointer-events: auto !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation *,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation * {
visibility: hidden !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions {
top: 3px !important;
left: 7px !important;
right: 7px !important;
width: auto !important;
height: 42px !important;
display: grid !important;
grid-template-columns: 50px minmax(0, 1fr) 48px 48px 48px 48px !important;
grid-template-rows: 42px !important;
align-items: center !important;
justify-items: center !important;
column-gap: 0 !important;
padding: 0 !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-button {
position: relative !important;
top: 0 !important;
left: auto !important;
right: auto !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: center !important;
display: grid !important;
place-items: center !important;
width: 48px !important;
height: 42px !important;
padding: 2px !important;
color: #e8ffe0 !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse {
display: grid !important;
grid-column: 1 !important;
justify-self: start !important;
width: 50px !important;
height: 42px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-document {
display: grid !important;
grid-column: 3 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-settings {
display: grid !important;
grid-column: 4 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-alerts {
display: grid !important;
grid-column: 5 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-account {
display: grid !important;
grid-column: 6 !important;
justify-self: end !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #p-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-portlet-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-box,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container form[role="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchform,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-form {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 30px 0 0 !important;
padding: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[type="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[name="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchInput {
min-height: 30px !important;
}
html.pvz-timeless-mobile-ready body .pvz-mobile-category-box {
display: block !important;
}
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready #catlinks,
html.pvz-timeless-mobile-ready body.pvz-custom-mobile-tools-ready .catlinks {
display: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: clip !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: var(--pvz-mobile-outer-gap-top, 1.5px) var(--pvz-mobile-outer-gap) var(--pvz-mobile-outer-gap) !important;
overflow-x: clip !important;
}
}
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body .pvz-timeless-action-icon,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-icon svg {
width: 22px !important;
height: 22px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse .pvz-timeless-action-icon,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse .pvz-timeless-action-icon svg {
width: 27px !important;
height: 27px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet {
width: min(226px, calc(100vw - 14px)) !important;
}
}
@media (min-width: 481px) and (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-outer-gap-top: clamp(5px, 0.85vw, 8px);
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block {
margin-top: 0 !important;
padding-top: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
margin-top: 0 !important;
padding-top: var(--pvz-mobile-outer-gap-top, 9px) !important;
}
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
margin-top: 0 !important;
}
}
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-outer-gap: 0px;
--pvz-mobile-outer-gap-top: 1.25px;
--pvz-mobile-inner-pad: 6px;
--pvz-mobile-ribbon-pull: var(--pvz-mobile-inner-pad, 6px);
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
min-height: 69px !important;
padding: 4px 7px 3px !important;
}
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title {
left: 48px !important;
right: 176px !important;
top: 4px !important;
height: 34px !important;
font-size: 0.95rem !important;
line-height: 1.10 !important;
overflow: visible !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions {
top: 3px !important;
left: 7px !important;
right: 7px !important;
width: auto !important;
height: 42px !important;
display: grid !important;
grid-template-columns: 50px minmax(0, 1fr) 48px 48px 48px 48px !important;
grid-template-rows: 42px !important;
align-items: center !important;
justify-items: center !important;
column-gap: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-button {
position: relative !important;
top: 0 !important;
left: auto !important;
right: auto !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: center !important;
display: grid !important;
place-items: center !important;
width: 48px !important;
height: 42px !important;
padding: 2px !important;
color: #e8ffe0 !important;
transform: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse {
display: grid !important;
grid-column: 1 !important;
justify-self: start !important;
width: 50px !important;
height: 42px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-document {
display: grid !important;
grid-column: 3 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-settings {
display: grid !important;
grid-column: 4 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-alerts {
display: grid !important;
grid-column: 5 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-account {
display: grid !important;
grid-column: 6 !important;
justify-self: end !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-icon,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-icon svg {
width: 22px !important;
height: 22px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse .pvz-timeless-action-icon,
html.pvz-timeless-mobile-ready body .pvz-timeless-action-browse .pvz-timeless-action-icon svg {
width: 27px !important;
height: 27px !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #p-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-portlet-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-box,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container form[role="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchform,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-form {
margin-top: 40px !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[type="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[name="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchInput {
min-height: 30px !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet {
width: min(226px, calc(100vw - 14px)) !important;
}
}
/* =========================
v96 모바일 최상단바 사이트명 한정 / footer 보정
- 일반 최상단바 버튼 판정은 v94 상태를 유지한다.
- '식물 vs 좀비 위키' 사이트명 요소만 글자 크기와 클릭 판정을 조정한다.
========================= */
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title,
html.pvz-timeless-mobile-ready body .pvz-timeless-site-title,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-title,
html.pvz-timeless-mobile-ready body .pvz-timeless-logo-text,
html.pvz-timeless-mobile-ready body #pvz-timeless-site-title,
html.pvz-timeless-mobile-ready body #pvz-timeless-topbar-title {
font-size: clamp(0.98rem, 3.45vw, 1.08rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.05em !important;
}
/* '식물 vs 좀비 위키' 글자 영역만 클릭 판정을 줄인다.
기존 left/right 동시 지정으로 생기던 넓은 빈 클릭 영역을 없앤다. */
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title {
right: auto !important;
width: max-content !important;
max-width: calc(100vw - 248px) !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
pointer-events: auto !important;
}
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title a,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title span {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 2px !important;
pointer-events: auto !important;
}
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title {
max-width: calc(100vw - 224px) !important;
}
}
/* footer 배경색 */
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer,
html.pvz-timeless-mobile-ready body .pvz-board-paper-meta {
background-color: #5c2207 !important;
}
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer {
margin-top: 18px !important;
padding: 18px 16px 22px !important;
}
/* =========================
v97 모바일 footer / 초기 로딩 화면 보정
========================= */
/* JS가 pvz-timeless-mobile-ready를 붙이기 전 기본 Timeless 화면이 잠깐 보이는 것을 막는다. */
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #mw-header-container,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #mw-site-navigation,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #mw-related-navigation,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #mw-content-container,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #mw-content-wrapper,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #mw-content-block,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #content,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless .mw-body,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless #footer,
html:not(.pvz-timeless-mobile-ready) body.skin-timeless .mw-footer {
visibility: hidden !important;
}
/* 빈 화면이 흰색으로 번쩍이지 않게 배경색은 먼저 고정한다. */
html:not(.pvz-timeless-mobile-ready),
html:not(.pvz-timeless-mobile-ready) body.skin-timeless {
background: #69c369 !important;
}
/* 본문창과 footer 사이 여백 제거 */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
margin-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-board-paper-meta,
html.pvz-timeless-mobile-ready body #catlinks,
html.pvz-timeless-mobile-ready body .catlinks {
margin-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 18px max(16px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)) !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
box-sizing: border-box !important;
}
/* footer가 짧은 문서에서도 화면 하단까지 밀착되도록 전체 레이아웃을 최소 높이로 잡는다. */
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body.skin-timeless {
min-height: 100% !important;
min-height: 100svh !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless {
background-color: #69c369 !important;
padding-bottom: 0 !important;
}
/* =========================
v102 최상단바 거리 통합 / 풀폭 상단바 / footer 하단 여백 방어
========================= */
/* Timeless 상단 패널 위치는 mobile.js v122가 absolute 문서 좌표로 직접 관리한다. */
/* PC에서 Chrome 축소/확대와 무관하게 최상단바 초록 배경은 항상 화면 좌우 끝까지 채운다.
v101처럼 #mw-header-container 자체에 max-width를 주지 않는다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
position: relative !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
background: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-color: var(--pvz-mobile-topbar-bg, #3f853d) !important;
overflow: visible !important;
}
/* 1280px 이하에서는 화면별 개별 margin-top을 쓰지 않고,
480px 이하 compact 구조의 비율을 공통 변수로 사용한다.
compact 기준: 버튼 높이 42px / 검색바 시작 40px ≈ 0.952. */
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
--pvz-topbar-button-box: clamp(40px, 8.75vw, 48px);
--pvz-topbar-to-search-ratio: 0.95238;
--pvz-topbar-to-search-gap: calc(var(--pvz-topbar-button-box) * var(--pvz-topbar-to-search-ratio));
--pvz-topbar-search-bottom-gap: clamp(4px, 0.8vw, 7px);
--pvz-topbar-search-height: 32px;
--pvz-search-expand-left: 0px;
--pvz-search-expand-right: 0px;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
min-height: calc(
var(--pvz-topbar-to-search-gap) +
var(--pvz-topbar-search-height) +
var(--pvz-topbar-search-bottom-gap)
) !important;
padding-bottom: var(--pvz-topbar-search-bottom-gap) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #p-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-portlet-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-box,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container form[role="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchform,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-form,
html.pvz-timeless-mobile-ready body .pvz-timeless-custom-search,
html.pvz-timeless-mobile-ready body .pvz-timeless-custom-search-form,
html.pvz-timeless-mobile-ready body #pvz-timeless-search,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-search,
html.pvz-timeless-mobile-ready body .pvz-timeless-search {
position: relative !important;
left: calc(-1 * var(--pvz-search-expand-left)) !important;
width: calc(100% + var(--pvz-search-expand-left) + var(--pvz-search-expand-right)) !important;
max-width: none !important;
margin-top: var(--pvz-topbar-to-search-gap) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[type="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[name="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchInput {
min-height: var(--pvz-topbar-search-height) !important;
}
}
/* 480px 이하도 같은 변수 비율만 사용한다. 기존 compact grid는 유지하되, 검색바 거리는 별도 숫자로 지정하지 않는다. */
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body {
--pvz-topbar-button-box: 42px;
--pvz-topbar-to-search-gap: calc(var(--pvz-topbar-button-box) * var(--pvz-topbar-to-search-ratio));
--pvz-topbar-search-bottom-gap: 6px;
}
}
/* PC Chrome 150% / 175% / 200% 확대 추정 구간만 보정한다.
실제 확대율은 CSS에서 직접 감지할 수 없으므로,
일반 PC 포인터 조건 + 확대 시 줄어드는 CSS viewport 폭으로 제한한다.
대략 1920px 화면 기준 150%≈1280px, 175%≈1097px, 200%≈960px.
1366px 화면 기준 150%≈911px, 175%≈781px, 200%≈683px. */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) and (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
--pvz-topbar-to-search-ratio: 0.42;
--pvz-topbar-to-search-gap: calc(var(--pvz-topbar-button-box) * var(--pvz-topbar-to-search-ratio));
}
}
/* PC Chrome 250% 확대 추정 구간 보정.
1920px 화면 기준 250%≈768px, 1366px 화면 기준 250%≈546px 근처다.
이 구간에서만 v107의 0.42보다 간격을 더 넓혀 탭과 검색바가 겹치지 않게 한다. */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) and (max-width: 840px) {
html.pvz-timeless-mobile-ready body {
--pvz-topbar-to-search-ratio: 0.86;
--pvz-topbar-to-search-gap: calc(var(--pvz-topbar-button-box) * var(--pvz-topbar-to-search-ratio));
}
}
@media (hover: hover) and (pointer: fine) and (min-width: 520px) and (max-width: 590px) {
html.pvz-timeless-mobile-ready body {
--pvz-topbar-to-search-ratio: 0.86;
--pvz-topbar-to-search-gap: calc(var(--pvz-topbar-button-box) * var(--pvz-topbar-to-search-ratio));
}
}
/* 1281px 이상 넓은 화면에서는 본문/보조창은 최대 크기를 유지하되,
상단바 배경 자체는 위의 100vw 규칙으로 풀폭 유지한다. */
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body {
--pvz-wide-left-col: clamp(172px, 12.2vw, 272px);
--pvz-wide-right-col: clamp(172px, 12.2vw, 272px);
--pvz-wide-main-max: 1120px;
--pvz-wide-layout-max: calc(
var(--pvz-wide-left-col) +
var(--pvz-wide-main-max) +
var(--pvz-wide-right-col) +
(var(--pvz-wide-col-gap) * 2) +
(var(--pvz-wide-page-pad) * 2)
);
--pvz-mobile-ui-max-width: min(100%, var(--pvz-wide-layout-max, 1720px));
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container {
grid-template-columns:
minmax(0, var(--pvz-wide-left-col))
minmax(0, var(--pvz-wide-main-max))
minmax(0, var(--pvz-wide-right-col)) !important;
width: 100% !important;
max-width: min(100%, var(--pvz-wide-layout-max)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
width: 100% !important;
max-width: var(--pvz-wide-main-max) !important;
justify-self: stretch !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail {
max-width: 272px !important;
}
}
/* 사이트명 위치는 기존 요청값 유지 */
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-title,
html.pvz-timeless-mobile-ready body .pvz-timeless-site-title,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-title,
html.pvz-timeless-mobile-ready body .pvz-timeless-logo-text,
html.pvz-timeless-mobile-ready body #pvz-timeless-site-title,
html.pvz-timeless-mobile-ready body #pvz-timeless-topbar-title {
transform: translateY(5px) !important;
}
/* footer는 배경 컨테이너가 전체 폭과 남은 높이를 채우고,
footer 내용만 최대폭을 가진다. 화면 너비와 문서 길이에 상관없이 아래 여백이 생기지 않게 한다. */
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body.skin-timeless {
min-height: 100vh !important;
min-height: 100svh !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless {
display: flex !important;
flex-direction: column !important;
padding-bottom: 0 !important;
background-color: var(--pvz-wiki-bg-color, #69c369) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container {
flex: 0 0 auto !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container {
flex: 1 0 auto !important;
display: block !important;
width: 100vw !important;
max-width: none !important;
min-height: max(170px, calc(128px + env(safe-area-inset-bottom))) !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
}
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer {
width: 100% !important;
max-width: var(--pvz-mobile-ui-max-width, 1720px) !important;
margin: 0 auto !important;
padding-top: 18px !important;
padding-bottom: max(84px, calc(58px + env(safe-area-inset-bottom))) !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
box-sizing: border-box !important;
}
/* =========================
v111 footer 뒤 하단 배경판 추가
- v110처럼 footer 자체를 크게 늘리지 않는다.
- 화면 아래가 비어 보일 때 footer 뒤쪽에 깔린 별도 배경판이 #5c2207로 채운다.
========================= */
/* 배경판이 들어갈 기준 레이어 */
html.pvz-timeless-mobile-ready body.skin-timeless {
position: relative !important;
}
/* 상단바/본문/footer는 배경판보다 위에 놓는다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container,
html.pvz-timeless-mobile-ready body.skin-timeless #footer,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-footer {
position: relative !important;
z-index: 1 !important;
}
/* footer 뒤쪽의 별도 하단 배경판.
fixed라서 문서가 짧거나 iPhone Chrome 하단 안전영역이 생겨도 화면 밑까지 채운다. */
html.pvz-timeless-mobile-ready body.skin-timeless::after {
content: "" !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
display: block !important;
width: 100vw !important;
height: max(46vh, calc(220px + env(safe-area-inset-bottom))) !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* footer 자체는 v109 계열의 크기를 유지하되, 배경색만 확실히 맞춘다. */
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container {
background: #5c2207 !important;
background-color: #5c2207 !important;
}
/* =========================
v112 footer 뒤 배경판 상단 정렬
- v111의 body::after 고정 배경판은 끈다.
- footer 자체의 ::before 배경판을 사용해 배경판 맨 위가 footer 맨 위와 맞게 한다.
========================= */
/* v111 body 고정 배경판 비활성화 */
html.pvz-timeless-mobile-ready body.skin-timeless::after {
content: none !important;
display: none !important;
}
/* footer 컨테이너를 배경판 기준점으로 사용 */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container {
position: relative !important;
z-index: 1 !important;
isolation: isolate !important;
background: transparent !important;
background-color: transparent !important;
}
/* footer 뒤 배경판:
top: 0이 footer 컨테이너의 맨 윗부분이라 배경판 시작점이 footer와 맞는다.
height를 크게 잡아 짧은 문서에서도 화면 아래까지 이어진다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: calc(50% - 50vw) !important;
display: block !important;
width: 100vw !important;
height: max(100%, calc(100vh + env(safe-area-inset-bottom))) !important;
height: max(100%, calc(100svh + env(safe-area-inset-bottom))) !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* footer 내용은 배경판 위에 놓는다. */
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer {
position: relative !important;
z-index: 1 !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
}
/* #mw-footer-container가 없는 구조에 대한 예비 방어:
이 경우 footer 자체의 맨 위를 기준으로 배경판을 시작한다. */
html.pvz-timeless-mobile-ready body.skin-timeless:not(:has(#mw-footer-container)) #footer::before,
html.pvz-timeless-mobile-ready body.skin-timeless:not(:has(#mw-footer-container)) .mw-footer::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: calc(50% - 50vw) !important;
display: block !important;
width: 100vw !important;
height: max(100%, calc(100vh + env(safe-area-inset-bottom))) !important;
height: max(100%, calc(100svh + env(safe-area-inset-bottom))) !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* =========================
v120 최상단바 배경/하단선 정리
========================= */
/* 실제 최상단바의 연회색/기본 테두리선을 제거한다.
하단선은 아래 ::after 풀폭 도형 박스가 담당한다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-header,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-header,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-wrap,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-inner,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-content {
border-bottom: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* 최상단바 실제 영역은 최대폭을 가진다.
1280px 이하에서는 화면 좌우를 꽉 채운다. */
html.pvz-timeless-mobile-ready body {
--pvz-mobile-topbar-outer-max: var(--pvz-mobile-ui-max-width, var(--pvz-wide-layout-max, 1720px));
--pvz-mobile-topbar-line-color: #043f10;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
position: relative !important;
z-index: 20 !important;
width: calc(100vw - 14px) !important;
max-width: var(--pvz-mobile-topbar-outer-max) !important;
margin-left: auto !important;
margin-right: auto !important;
background: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-color: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-image: none !important;
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow-x: visible !important;
overflow-y: visible !important;
box-sizing: border-box !important;
}
/* 최상단바 뒤 배경 박스.
1281px 이상에서만 켜지고, 1280px 이하에서는 완전히 꺼진다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
display: block !important;
width: 100vw !important;
min-height: 100% !important;
transform: translateX(-50%) !important;
background: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-color: var(--pvz-mobile-topbar-bg, #3f853d) !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
z-index: -2 !important;
pointer-events: none !important;
}
/* 최상단바와 그 뒤 배경의 공통 하단선 역할을 하는 별도 풀폭 도형 박스.
실제 보이는 굵기는 약 1.5px. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: 0 !important;
display: block !important;
width: 100vw !important;
height: 1.5px !important;
transform: translateX(-50%) !important;
background: var(--pvz-mobile-topbar-line-color, #043f10) !important;
background-color: var(--pvz-mobile-topbar-line-color, #043f10) !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* 1280px 이하: 최상단바 뒤 배경 박스만 삭제.
하단선 도형 박스는 계속 풀폭으로 유지한다. */
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-topbar-outer-max: none;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
border-radius: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::before {
content: none !important;
display: none !important;
}
}
/* 1281px 이상: 실제 최상단바는 최대폭, 뒤 배경 박스와 하단선 박스는 100vw. */
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-topbar-outer-max: var(--pvz-mobile-ui-max-width, var(--pvz-wide-layout-max, 1720px));
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::before {
content: "" !important;
display: block !important;
}
}
/* PC Chrome 175%/200% 확대 구간에서 보이던 연회색 선 제거 보강.
Timeless/브라우저 기본 border, inset shadow, pseudo line을 전부 끈다. */
@media (hover: hover) and (pointer: fine) and (min-width: 860px) and (max-width: 1280px) {
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-page-base,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head-base,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-header,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-header,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-wrap {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background-image: none !important;
}
}
/* =========================
v126 본문창 상단 밀착 / 외곽선 제거 / footer 아래 배경 채움
========================= */
/* 모바일 화면에서 본문창과 최상단바 사이에 생기는 미세 여백을 제거한다.
검색바 위치/크기는 건드리지 않고, header 아래와 content 위쪽 간격만 0으로 맞춘다. */
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-outer-gap-top: 0px;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
margin-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
margin-top: 0 !important;
}
}
/* 본문창의 바깥 테두리선 제거.
Timeless 기본 .mw-body, content wrapper, content block의 외곽 border/outline/shadow를 끈다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* 본문창 외곽선이 pseudo-element로 그려지는 경우까지 방어한다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content::after,
html.pvz-timeless-mobile-ready body.skin-timeless #content::before,
html.pvz-timeless-mobile-ready body.skin-timeless #content::after,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body::before,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body::after {
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* footer 아래 뒷배경색 채움.
큰 absolute/fixed pseudo 배경판을 쓰지 않고, body flex와 footer container 배경으로만 채운다.
이렇게 해야 화면 아래 여백은 채우면서도 스크롤바가 2개 생기지 않는다. */
html.pvz-timeless-mobile-ready {
min-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background-color: var(--pvz-wiki-bg-color, #69c369) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless {
min-height: 100vh !important;
min-height: 100svh !important;
display: flex !important;
flex-direction: column !important;
overflow-y: visible !important;
overflow-x: hidden !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
background-color: var(--pvz-wiki-bg-color, #69c369) !important;
}
/* 기존 footer 뒷배경 pseudo-element는 문서 높이를 밀 수 있으므로 완전히 끈다. */
html.pvz-timeless-mobile-ready body.skin-timeless::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container::before,
html.pvz-timeless-mobile-ready body.skin-timeless:not(:has(#mw-footer-container)) #footer::before,
html.pvz-timeless-mobile-ready body.skin-timeless:not(:has(#mw-footer-container)) .mw-footer::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
background: transparent !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block {
flex: 0 0 auto !important;
}
/* footer container가 남은 세로 여백을 차지하게 하여,
footer 아래 영역이 항상 #5c2207로 꽉 차도록 한다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container {
flex: 1 0 auto !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
min-height: max(140px, calc(96px + env(safe-area-inset-bottom))) !important;
overflow: visible !important;
background: #5c2207 !important;
background-color: #5c2207 !important;
box-sizing: border-box !important;
}
/* 실제 footer 내용은 footer container 위에 그대로 놓는다. */
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer {
background: #5c2207 !important;
background-color: #5c2207 !important;
box-sizing: border-box !important;
}
/* =========================
v129 최상단바-본문창 사이 body 배경 노출 제거
========================= */
/* 원인:
사진의 짙은 녹색 영역은 본문창의 배경이 아니라 body 배경 이미지/배경색이 노출된 부분이다.
v128에서 #mw-page-base / #mw-head-base를 숨겨도 사라지지 않았으므로,
Timeless 장식 배경판이 아니라 최상단바 종료 지점과 #mw-content-container 시작점 사이에
실제 레이아웃 간격이 남는 문제로 본다.
따라서 색을 덮는 v127 방식이 아니라, 본문 컨테이너 자체를 위로 당겨 간격을 제거한다. */
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
/* 사진 기준 짙은 녹색 띠는 약 30px대 CSS 간격에 가깝다.
화면폭에 따라 약간 달라질 수 있어 clamp로 조정한다. */
--pvz-mobile-content-pull-up: clamp(28px, 5.35vw, 34px);
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
margin-bottom: 0 !important;
}
/* 실제 간격을 만드는 최상위 content container를 위로 당긴다.
검색바/최상단바 자체는 건드리지 않는다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container {
margin-top: calc(-1 * var(--pvz-mobile-content-pull-up, 32px)) !important;
padding-top: 0 !important;
background: var(--pvz-mobile-frame-bg, #e6d3b3) !important;
background-color: var(--pvz-mobile-frame-bg, #e6d3b3) !important;
background-image: none !important;
border-top: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* wrapper가 따로 아래로 밀리는 경우도 방어 */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
margin-top: 0 !important;
padding-top: 0 !important;
background: var(--pvz-mobile-frame-bg, #e6d3b3) !important;
background-color: var(--pvz-mobile-frame-bg, #e6d3b3) !important;
background-image: none !important;
border-top: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* 본문 첫 요소의 margin collapse 때문에 body 배경이 다시 드러나는 경우 방어 */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless #content > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless #bodyContent > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body-content > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text > :first-child,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text > .mw-parser-output > :first-child {
margin-top: 0 !important;
}
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
margin-top: 0 !important;
}
}
/* 매우 좁은 모바일에서는 당김값을 조금 줄여 검색바와 본문이 겹치지 않게 한다. */
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-content-pull-up: 28px;
}
}
/* PC Chrome 175%/200%처럼 CSS viewport가 줄어든 데스크톱 확대 구간은
모바일보다 띠가 약간 더 커질 수 있어 별도 보정한다. */
@media (hover: hover) and (pointer: fine) and (min-width: 520px) and (max-width: 840px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-content-pull-up: 34px;
}
}
/* =========================
v130 모바일 제목 리본 여백 / 본문 상단 여백
========================= */
/* 모바일 문서 제목 리본.
데스크톱 제목 리본처럼 글자 주변 여백이 충분히 보이도록 내부 padding을 키운다. */
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-title-ribbon-padding-y: 18px;
--pvz-mobile-title-ribbon-padding-x: 34px;
--pvz-mobile-title-above-gap: clamp(8px, 1.8vw, 15px);
}
html.pvz-timeless-mobile-ready body .pvz-title-ribbon,
html.pvz-timeless-mobile-ready body .pvz-page-title-ribbon,
html.pvz-timeless-mobile-ready body .pvz-document-title-ribbon,
html.pvz-timeless-mobile-ready body .pvz-board-title-ribbon,
html.pvz-timeless-mobile-ready body .pvz-ribbon-title,
html.pvz-timeless-mobile-ready body .pvz-title-tab,
html.pvz-timeless-mobile-ready body .pvz-section-ribbon,
html.pvz-timeless-mobile-ready body .pvz-heading-ribbon,
html.pvz-timeless-mobile-ready body #firstHeading,
html.pvz-timeless-mobile-ready body .firstHeading,
html.pvz-timeless-mobile-ready body .mw-first-heading {
padding-top: var(--pvz-mobile-title-ribbon-padding-y) !important;
padding-bottom: var(--pvz-mobile-title-ribbon-padding-y) !important;
padding-left: var(--pvz-mobile-title-ribbon-padding-x) !important;
padding-right: var(--pvz-mobile-title-ribbon-padding-x) !important;
box-sizing: border-box !important;
}
/* 본문창 안에서 제목 리본 위쪽 여백을 크게 둔다.
최상단바와 본문창 사이 간격은 v129의 pull-up으로 처리하고,
여기서는 본문창 내부의 제목 리본 위 공간만 늘린다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body,
html.pvz-timeless-mobile-ready body.skin-timeless #bodyContent,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body-content {
padding-top: var(--pvz-mobile-title-above-gap) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #firstHeading,
html.pvz-timeless-mobile-ready body.skin-timeless .firstHeading,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-first-heading,
html.pvz-timeless-mobile-ready body.skin-timeless .pvz-title-ribbon,
html.pvz-timeless-mobile-ready body.skin-timeless .pvz-page-title-ribbon,
html.pvz-timeless-mobile-ready body.skin-timeless .pvz-document-title-ribbon,
html.pvz-timeless-mobile-ready body.skin-timeless .pvz-board-title-ribbon,
html.pvz-timeless-mobile-ready body.skin-timeless .pvz-ribbon-title,
html.pvz-timeless-mobile-ready body.skin-timeless .pvz-title-tab {
margin-top: 0 !important;
}
}
/* 좁은 화면에서는 좌우 padding만 약간 줄여 제목이 과하게 좁아지지 않게 한다. */
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-title-ribbon-padding-y: 16px;
--pvz-mobile-title-ribbon-padding-x: 26px;
--pvz-mobile-title-above-gap: 9px;
}
}
/* Timeless 상단 sheet는 mobile.js v122가 직접 absolute 문서 좌표에 배치한다.
그 외 액션바 계열 패널은 별도 document-lock 로직을 사용한다. */
html.pvz-timeless-mobile-ready body .pvz-timeless-sheet.is-open,
html.pvz-timeless-mobile-ready body .pvz-timeless-panel.is-open,
html.pvz-timeless-mobile-ready body .pvz-mobile-panel.is-open,
html.pvz-timeless-mobile-ready body .pvz-timeless-menu.is-open,
html.pvz-timeless-mobile-ready body .pvz-timeless-dropdown.is-open,
html.pvz-timeless-mobile-ready body [data-pvz-panel-document-locked="true"] {
transform: none !important;
animation: none !important;
transition-property: opacity, visibility !important;
will-change: auto !important;
}
/* =========================
v141 최상단바 단일 배경 레이어화 / iPad Pro 13 검색바 내부 배치
========================= */
/* 원인:
선이 생기기 시작한 시점이 '최상단바 뒤에 좌우로 꽉 차는 배경색 박스'를 깔았을 때라면,
문제는 검색바나 아이콘의 border가 아니라
1) 실제 #mw-header-container 레이어
2) 그 뒤에 깔린 100vw 배경 pseudo-element
3) 별도 하단선 pseudo-element
이 서로 다른 레이어의 경계가 확대/태블릿 폭에서 보이는 것이다.
해결:
1280px 이하에서는 뒤 배경 박스 구조를 완전히 버린다.
최상단바 자체 #mw-header-container 하나만 100vw 초록 배경을 가지게 하여
서로 다른 초록 레이어가 맞닿는 경계선을 없앤다. */
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
position: relative !important;
z-index: 20 !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-color: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-image: none !important;
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
isolation: auto !important;
box-sizing: border-box !important;
}
/* 기존 풀폭 배경 박스와 별도 하단선 박스를 모두 끈다.
이 둘이 실제 최상단바 레이어와 맞닿으면서 사진의 선을 만들 가능성이 가장 높다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Timeless 기본 header row / hack row / base row에 남은 border-shadow도 제거.
검색바 자체 디자인은 건드리지 않는다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head-base,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-page-base,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-header,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-header,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-wrap,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-inner,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-content,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-actions {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background-image: none !important;
}
/* 같은 이유로 header 내부 장식 pseudo-element도 끈다.
#mw-header-container::before/after는 위에서 이미 별도 처리했다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack::after,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header::before,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-header::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head-base::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head-base::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-page-base::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-page-base::after,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-header::before,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-header::after,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-header::before,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-header::after,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-wrap::before,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-wrap::after,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-inner::before,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-inner::after,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-content::before,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-content::after,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions::before,
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions::after,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-actions::before,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-actions::after {
content: none !important;
display: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background: transparent !important;
background-image: none !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-actions,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-wrap,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-inner,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-content {
background: transparent !important;
background-image: none !important;
}
}
/* iPad Pro 13 세로 추정 폭:
검색바는 별도 2행 흐름이 아니라 최상단바 내부 하단에 배치한다.
단, 배경은 #mw-header-container 단일 레이어만 사용한다. */
@media (min-width: 1000px) and (max-width: 1060px) {
html.pvz-timeless-mobile-ready body {
--pvz-ipad13-topbar-row-height: 52px;
--pvz-ipad13-search-height: 32px;
--pvz-ipad13-search-left-gap: 0px;
--pvz-ipad13-search-right-gap: 0px;
--pvz-ipad13-search-bottom-gap: 7px;
--pvz-topbar-button-box: 48px;
--pvz-topbar-search-height: var(--pvz-ipad13-search-height);
--pvz-topbar-search-bottom-gap: var(--pvz-ipad13-search-bottom-gap);
--pvz-topbar-to-search-gap: 0px;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
height: calc(
var(--pvz-ipad13-topbar-row-height) +
var(--pvz-ipad13-search-height) +
var(--pvz-ipad13-search-bottom-gap)
) !important;
min-height: calc(
var(--pvz-ipad13-topbar-row-height) +
var(--pvz-ipad13-search-height) +
var(--pvz-ipad13-search-bottom-gap)
) !important;
padding: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-mobile-actions,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-actions,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-wrap,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-inner,
html.pvz-timeless-mobile-ready body .pvz-timeless-topbar-content {
height: var(--pvz-ipad13-topbar-row-height) !important;
min-height: var(--pvz-ipad13-topbar-row-height) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-action-button {
height: var(--pvz-topbar-button-box) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #p-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .mw-portlet-search,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-box,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container form[role="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchform,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container .search-form,
html.pvz-timeless-mobile-ready body .pvz-timeless-custom-search,
html.pvz-timeless-mobile-ready body .pvz-timeless-custom-search-form,
html.pvz-timeless-mobile-ready body #pvz-timeless-search,
html.pvz-timeless-mobile-ready body #pvz-timeless-mobile-search,
html.pvz-timeless-mobile-ready body .pvz-timeless-search {
position: absolute !important;
left: var(--pvz-ipad13-search-left-gap) !important;
right: var(--pvz-ipad13-search-right-gap) !important;
bottom: var(--pvz-ipad13-search-bottom-gap) !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
z-index: 1 !important;
box-sizing: border-box !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[type="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container input[name="search"],
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container #searchInput {
min-height: var(--pvz-ipad13-search-height) !important;
}
}
/* =========================
v145 이미지 배경 앞 전역 단색 배경 제거
========================= */
/* footer 배경 수정 과정에서 html/body에 들어간 전역 background-color가
Wiki_Bg.png 같은 맨 뒤 이미지 배경 앞에
단색 판처럼 깔릴 수 있다.
본문창, 최상단바, footer 자체 배경은 유지하고,
사이트 전체 뒤쪽에 깔리는 전역 단색 배경만 투명하게 만든다. */
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body,
html.pvz-timeless-mobile-ready body.skin-timeless {
background-color: transparent !important;
}
/* Timeless의 페이지 바깥 래퍼가 단색 배경을 다시 깔 경우 방어한다.
실제 본문창/최상단바/footer는 아래 selector에 포함하지 않는다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-page-base,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-head-base,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-site-navigation,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-related-navigation {
background-color: transparent !important;
background-image: none !important;
}
/* 이미지 배경 자체는 html/body 뒤쪽에 계속 보이도록 둔다.
다른 파일에서 background-image가 지정되어 있으면 그 이미지를 막지 않는다. */
html.pvz-timeless-mobile-ready {
background-image: var(--pvz-wiki-bg-image, inherit) !important;
background-repeat: var(--pvz-wiki-bg-repeat, repeat) !important;
background-position: var(--pvz-wiki-bg-position, center top) !important;
background-size: var(--pvz-wiki-bg-size, auto) !important;
background-attachment: var(--pvz-wiki-bg-attachment, scroll) !important;
}
/* =========================
v150 #mw-header-nav-hack 선 제거
========================= */
/* 개발자 도구 확인 결과:
최상단바 안쪽의 밝은 선은 검색바나 #mw-header-hack이 아니라
Timeless 기본 요소인 #mw-header-nav-hack에서 나오고 있었다.
확인된 computed style:
- border-top-color: rgb(234, 236, 240)
- border-top-width: 2px
- box-shadow: rgba(0,0,0,.075) 0 3px 3px 2px, rgba(0,0,0,.075) 0 0 2px
- background-color: rgb(255,255,255)
모바일 커스텀 최상단바에서는 이 요소가 장식선으로만 보이므로
시각 효과를 완전히 비활성화한다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-nav-hack {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
outline: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
/* 혹시 Timeless가 pseudo-element로 다시 선을 만드는 경우까지 방어 */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-nav-hack::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-nav-hack::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
outline: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 이전에 의심했던 #mw-header-hack도 선/그림자만 정리한다.
단, 실제 원인은 #mw-header-nav-hack이므로 display:none까지는 하지 않는다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-hack {
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
outline: 0 !important;
}
/* =========================
v154 최상단바 뒷배경 / 진한 초록색 밑선 안전 복구
========================= */
/* v153 문제 원인:
#mw-header-container > * 에 position: relative / z-index를 강제로 주면서
검색바, 버튼 줄, 제목의 기존 absolute/grid 배치가 깨졌다.
이번 버전은 최상단바 자식 요소를 전혀 건드리지 않는다.
뒷배경과 밑선만 #mw-header-container의 배경/pseudo-element로 복구한다.
함께 사용할 JS:
core-mobile.js v98
v97은 #mw-header-container::before/::after와 border-bottom을 런타임에서 끌 수 있으므로 쓰지 않는다. */
html.pvz-timeless-mobile-ready body {
--pvz-mobile-topbar-backdrop-bg: var(--pvz-mobile-topbar-bg, #3f853d);
--pvz-mobile-topbar-bottom-border: #286222;
}
/* 최상단바 본체.
자식 요소 position/z-index는 수정하지 않는다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container {
position: relative !important;
z-index: 20 !important;
background: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-color: var(--pvz-mobile-topbar-bg, #3f853d) !important;
background-image: none !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 1.5px solid var(--pvz-mobile-topbar-bottom-border, #286222) !important;
border-left: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* 최상단바 뒤에 좌우로 꽉 차는 초록색 뒷배경.
z-index를 지정하지 않는다.
::before는 첫 번째 가상 자식이라 실제 버튼/검색바/제목보다 앞 배치 흐름을 건드리지 않고
배경처럼 먼저 칠해진다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 50% !important;
top: 0 !important;
width: 100vw !important;
height: 100% !important;
min-height: 100% !important;
transform: translateX(-50%) !important;
background: var(--pvz-mobile-topbar-backdrop-bg, #3f853d) !important;
background-color: var(--pvz-mobile-topbar-backdrop-bg, #3f853d) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
pointer-events: none !important;
}
/* 진한 초록색 풀폭 밑선.
#mw-header-nav-hack의 회색 선/그림자가 아니라 의도한 #286222 밑선만 만든다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 50% !important;
bottom: -1.5px !important;
width: 100vw !important;
height: 1.5px !important;
transform: translateX(-50%) !important;
background: var(--pvz-mobile-topbar-bottom-border, #286222) !important;
background-color: var(--pvz-mobile-topbar-bottom-border, #286222) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
pointer-events: none !important;
}
/* 실제 문제 원인이었던 Timeless 기본 nav hack은 계속 비활성화한다. */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-nav-hack {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
outline: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-nav-hack::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-nav-hack::after {
content: none !important;
display: none !important;
border: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
background: transparent !important;
background-image: none !important;
}
/* =========================
v160 wide rail 크기 축소 메모
========================= */
/* PC에서 모바일 화면으로 볼 때 보조창이 조금 크게 보이던 문제를 줄이기 위해
1281px 이상 wide rail 구간의 폭, 내부 padding, 제목/목록 글자 크기 값을
기존 블록에서 직접 교체했다.
기준:
- 1281px 이상: 보조창 폭 약 7~8% 축소
- 1440px 이상: 보조창 폭 약 6~8% 축소
- 1800px 이상: 보조창 폭 약 7% 축소
- 제목/목록 글자 크기와 여백도 함께 소폭 축소 */
/* =========================
v161 wide rail 1281px 기준 고정 / 글자 축소 / radius 제거
========================= */
/* PC에서 모바일 화면으로 볼 때 표시되는 보조창은
1281px 구간의 작은 크기 기준으로 고정한다.
1440px/1800px 이상에서도 더 커지지 않는다. */
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body {
--pvz-wide-left-col: 158px;
--pvz-wide-right-col: 158px;
--pvz-wide-logo-width: 139px;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-left,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-right,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail,
html.pvz-timeless-mobile-ready body .pvz-timeless-side-rail,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-card,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-box,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-card,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-box,
html.pvz-timeless-mobile-ready body #mw-site-navigation,
html.pvz-timeless-mobile-ready body #mw-related-navigation,
html.pvz-timeless-mobile-ready body #p-logo {
border-radius: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-card,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-box,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-card,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-box,
html.pvz-timeless-mobile-ready body #mw-site-navigation .sidebar-chunk,
html.pvz-timeless-mobile-ready body #mw-related-navigation .sidebar-chunk,
html.pvz-timeless-mobile-ready body .sidebar-chunk {
margin-bottom: 9px !important;
border-radius: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-card h2,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-box h2,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-card h2,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-box h2,
html.pvz-timeless-mobile-ready body #mw-site-navigation h2,
html.pvz-timeless-mobile-ready body #mw-related-navigation h2,
html.pvz-timeless-mobile-ready body .sidebar-chunk h2 {
padding: 8px 10px 8px !important;
font-size: 0.84rem !important;
line-height: 1.18 !important;
border-radius: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-card .body,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-box .body,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-card .body,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-box .body,
html.pvz-timeless-mobile-ready body #mw-site-navigation .body,
html.pvz-timeless-mobile-ready body #mw-related-navigation .body,
html.pvz-timeless-mobile-ready body .sidebar-chunk .body {
padding: 8px 10px 10px !important;
border-radius: 0 !important;
}
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-card li,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-box li,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-card li,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-box li,
html.pvz-timeless-mobile-ready body #mw-site-navigation li,
html.pvz-timeless-mobile-ready body #mw-related-navigation li,
html.pvz-timeless-mobile-ready body .sidebar-chunk li,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-card a,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-box a,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-card a,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-box a,
html.pvz-timeless-mobile-ready body #mw-site-navigation a,
html.pvz-timeless-mobile-ready body #mw-related-navigation a,
html.pvz-timeless-mobile-ready body .sidebar-chunk a {
font-size: 0.80rem !important;
line-height: 1.34 !important;
}
}
/* 기존 v161 기준 문법 끝 */
/* v163 수정사항 시작 */
/* v163 전체 크기 제한 확대 시작 */
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body {
/* v162보다 더 넓은 기준.
보조창은 v161의 고정 소형값을 유지하고, 중앙 본문/상단바/footer 제한만 더 넓힌다. */
--pvz-wide-main-max: 1320px;
--pvz-wide-layout-max: calc(
var(--pvz-wide-left-col) +
var(--pvz-wide-main-max) +
var(--pvz-wide-right-col) +
(var(--pvz-wide-col-gap) * 2) +
(var(--pvz-wide-page-pad) * 2)
);
--pvz-mobile-ui-max-width: min(100%, var(--pvz-wide-layout-max, 2100px));
--pvz-mobile-footer-content-max: var(--pvz-mobile-content-max, var(--pvz-content-max, 1320px));
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body.skin-timeless #content,
html.pvz-timeless-mobile-ready body.skin-timeless .mw-body {
max-width: var(--pvz-wide-main-max, 1320px) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container {
max-width: min(100%, var(--pvz-wide-layout-max, 2100px)) !important;
}
}
@media (max-width: 1280px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-inner-pad: clamp(9px, 2vw, 14px);
--pvz-mobile-footer-content-max: min(100%, var(--pvz-mobile-content-max, var(--pvz-content-max, 1320px)));
}
}
/* v163 전체 크기 제한 확대 끝 */
/* v163 보조창 테두리 1px 시작 */
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body .pvz-custom-mobile-tools-section,
html.pvz-timeless-mobile-ready body .pvz-timeless-wide-rail .pvz-custom-mobile-tools-section,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-card,
html.pvz-timeless-mobile-ready body .pvz-timeless-rail-box,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-card,
html.pvz-timeless-mobile-ready body .pvz-wide-rail-box,
html.pvz-timeless-mobile-ready body #mw-site-navigation .sidebar-chunk,
html.pvz-timeless-mobile-ready body #mw-related-navigation .sidebar-chunk,
html.pvz-timeless-mobile-ready body .sidebar-chunk {
border-width: 1px !important;
border-radius: 0 !important;
}
}
/* v163 보조창 테두리 1px 끝 */
/* v163 본문 전용 배경 시작 */
html.pvz-timeless-mobile-ready body {
--pvz-mobile-article-bg: #fff2db;
--pvz-mobile-article-border: #d4b996;
}
/* 제목 리본/액션바/분류/footer가 아니라 실제 문서 본문 영역만 감싸는 안쪽 박스 */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 12px !important;
padding: var(--pvz-mobile-article-pad) !important;
background: var(--pvz-mobile-article-bg, #fff2db) !important;
background-color: var(--pvz-mobile-article-bg, #fff2db) !important;
background-image: none !important;
border: 1.5px solid var(--pvz-mobile-article-border, #d4b996) !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text > .mw-parser-output {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text > .mw-parser-output > :first-child {
margin-top: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text > .mw-parser-output > :last-child {
margin-bottom: 0 !important;
}
@media (max-width: 480px) {
html.pvz-timeless-mobile-ready body {
--pvz-mobile-article-pad: 11px;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-text {
margin: 8px 0 10px !important;
padding: var(--pvz-mobile-article-pad) !important;
}
}
/* v163 본문 전용 배경 끝 */
/* v164 footer 뒷배경 제거 시작 */
html.pvz-timeless-mobile-ready body {
--pvz-mobile-footer-bg: var(--pvz-mobile-frame-bg, #e6d3b3);
--pvz-mobile-footer-content-max: var(--pvz-mobile-content-max, var(--pvz-content-max, 1320px));
}
html.pvz-timeless-mobile-ready,
html.pvz-timeless-mobile-ready body {
min-height: 100% !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless {
min-height: 100vh !important;
min-height: 100svh !important;
min-height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
overflow-x: hidden !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless #mw-header-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-container,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-wrapper,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-content-block {
flex: 0 0 auto !important;
}
/* footer 전체 뒷배경 */
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container {
flex: 1 0 auto !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
min-height: max(140px, calc(96px + env(safe-area-inset-bottom))) !important;
height: auto !important;
background: var(--pvz-mobile-footer-bg, #e6d3b3) !important;
background-color: var(--pvz-mobile-footer-bg, #e6d3b3) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
isolation: isolate !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* 실제 footer 본체는 기존 배경색을 유지하고, 라이트 모드에서는 진한 갈색 글자를 사용한다. */
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer {
display: block !important;
width: min(100%, var(--pvz-mobile-footer-content-max, 1320px)) !important;
max-width: var(--pvz-mobile-footer-content-max, 1320px) !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
color: var(--pvz-mobile-footer-text, #000) !important;
background: var(--pvz-mobile-footer-bg, #e6d3b3) !important;
background-color: var(--pvz-mobile-footer-bg, #e6d3b3) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
box-sizing: border-box !important;
}
/* footer 일반 글자색은 모드별 --pvz-mobile-footer-text 변수를 따른다. */
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body #footer *,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body .mw-footer *,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body footer *,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body #mw-footer *,
html.pvz-timeless-mobile-ready body .mw-body-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer * {
color: var(--pvz-mobile-footer-text, #000) !important;
text-shadow: none !important;
}
html.pvz-timeless-mobile-ready body #footer a,
html.pvz-timeless-mobile-ready body .mw-footer a,
html.pvz-timeless-mobile-ready body footer a,
html.pvz-timeless-mobile-ready body #mw-footer a,
html.pvz-timeless-mobile-ready body .mw-body-footer a {
color: var(--pvz-mobile-link) !important;
text-decoration-color: currentColor !important;
}
@media (max-width: 640px) {
html.pvz-timeless-mobile-ready body #footer,
html.pvz-timeless-mobile-ready body .mw-footer,
html.pvz-timeless-mobile-ready body footer,
html.pvz-timeless-mobile-ready body #mw-footer,
html.pvz-timeless-mobile-ready body .mw-body-footer {
width: 100% !important;
max-width: 100% !important;
}
}
/* footer 뒷배경 확장 및 감지형 보강 완전 비활성화 */
html.pvz-timeless-mobile-ready body.skin-timeless::after,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container::before,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container::after,
html.pvz-footer-backdrop-gap-needed body.skin-timeless #mw-footer-container::before,
html.pvz-footer-backdrop-gap-needed body.skin-timeless #mw-footer-container::after,
body.skin-timeless.pvz-footer-backdrop-gap-needed #mw-footer-container::before,
body.skin-timeless.pvz-footer-backdrop-gap-needed #mw-footer-container::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
pointer-events: none !important;
}
html.pvz-footer-backdrop-gap-needed body.skin-timeless #mw-footer-container,
body.skin-timeless.pvz-footer-backdrop-gap-needed #mw-footer-container {
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body #footer > :first-child,
html.pvz-timeless-mobile-ready body .mw-footer > :first-child,
html.pvz-timeless-mobile-ready body footer > :first-child,
html.pvz-timeless-mobile-ready body #mw-footer > :first-child,
html.pvz-timeless-mobile-ready body .mw-body-footer > :first-child {
margin-top: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless,
html.pvz-timeless-mobile-ready body.skin-timeless #mw-footer-container,
html.pvz-timeless-mobile-ready body #footer {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* v164 footer 뒷배경 제거 끝 */
/* v163 480px 이하 MediaWiki 버튼 표시 시작 */
@media (max-width: 480px) {
/* MediaWiki footer 아이콘/버튼류가 좁은 화면에서 사라지지 않게,
480px 이상과 같은 표시 상태로 맞춘다. */
html.pvz-timeless-mobile-ready body #footer-icons,
html.pvz-timeless-mobile-ready body .footer-icons,
html.pvz-timeless-mobile-ready body .mw-footer-icons,
html.pvz-timeless-mobile-ready body #footer-poweredbyico,
html.pvz-timeless-mobile-ready body #footer-copyrightico,
html.pvz-timeless-mobile-ready body #footer-icons li,
html.pvz-timeless-mobile-ready body .footer-icons li,
html.pvz-timeless-mobile-ready body .mw-footer-icons li {
display: inline-flex !important;
visibility: visible !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 6px 6px 0 !important;
padding: 0 !important;
opacity: 1 !important;
overflow: visible !important;
}
html.pvz-timeless-mobile-ready body #footer-poweredbyico a,
html.pvz-timeless-mobile-ready body #footer-copyrightico a,
html.pvz-timeless-mobile-ready body #footer-icons a,
html.pvz-timeless-mobile-ready body .footer-icons a,
html.pvz-timeless-mobile-ready body .mw-footer-icons a {
display: inline-flex !important;
visibility: visible !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
}
html.pvz-timeless-mobile-ready body #footer-poweredbyico img,
html.pvz-timeless-mobile-ready body #footer-copyrightico img,
html.pvz-timeless-mobile-ready body #footer-icons img,
html.pvz-timeless-mobile-ready body .footer-icons img,
html.pvz-timeless-mobile-ready body .mw-footer-icons img {
display: inline-block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
max-width: 88px !important;
max-height: 31px !important;
opacity: 1 !important;
}
html.pvz-timeless-mobile-ready body .mw-ui-button,
html.pvz-timeless-mobile-ready body .mw-htmlform-submit,
html.pvz-timeless-mobile-ready body .oo-ui-buttonElement-button,
html.pvz-timeless-mobile-ready body button,
html.pvz-timeless-mobile-ready body input[type="button"],
html.pvz-timeless-mobile-ready body input[type="submit"] {
visibility: visible !important;
opacity: 1 !important;
}
}
/* v163 480px 이하 MediaWiki 버튼 표시 끝 */
/* v163 수정사항 끝 */
/* =========================
v172 모든 화면 다크 모드 대응 시작
========================= */
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) {
--pvz-mobile-paper-bg: #211e1a;
--pvz-mobile-frame-bg: #352d23;
--pvz-mobile-article-bg: #211e1a;
--pvz-mobile-article-border: #5a4937;
--pvz-mobile-text: #f5efe6;
--pvz-mobile-link: #9fd79a;
--pvz-mobile-footer-bg: #2a2119;
--pvz-mobile-footer-text: #f5efe6;
--pvz-search-bg: #211e1a;
--pvz-search-border: #6a5743;
--pvz-search-text: #f5efe6;
--pvz-search-placeholder: #b8a793;
--pvz-search-icon: #e0b983;
--pvz-search-button-bg: #352d23;
--pvz-search-button-hover: #45392c;
--pvz-search-focus: #e0b983;
--pvz-search-suggestions-bg: #2b251e;
--pvz-search-suggestion-hover: #352d23;
--pvz-search-suggestion-active: #45392c;
--pvz-search-divider: rgba(214, 194, 170, 0.18);
--pvz-search-shadow: rgba(0, 0, 0, 0.42);
--pvz-account-panel-bg: #2b251e;
--pvz-account-heading-bg: #352d23;
--pvz-account-muted: #d6c2aa;
--pvz-account-separator: rgba(214, 194, 170, 0.18);
--pvz-account-hover-bg: rgba(255, 255, 255, 0.07);
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless {
color: var(--pvz-mobile-text) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless #mw-content,
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless #content,
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless .mw-body,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless #mw-content,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless #content,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless .mw-body {
color: var(--pvz-mobile-text) !important;
background: var(--pvz-mobile-frame-bg) !important;
background-color: var(--pvz-mobile-frame-bg) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body #mw-content-text,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) #mw-content-text {
color: var(--pvz-mobile-text) !important;
background: var(--pvz-mobile-article-bg) !important;
background-color: var(--pvz-mobile-article-bg) !important;
border-color: var(--pvz-mobile-article-border) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body #mw-content-text :where(
p,
li,
dd,
dt,
figcaption,
caption,
th,
td,
label,
.mw-parser-output
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) #mw-content-text :where(
p,
li,
dd,
dt,
figcaption,
caption,
th,
td,
label,
.mw-parser-output
) {
color: var(--pvz-mobile-text) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body #mw-content-text a,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) #mw-content-text a {
color: var(--pvz-mobile-link) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body #mw-content-text :where(pre, code, blockquote),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) #mw-content-text :where(pre, code, blockquote) {
color: var(--pvz-mobile-text) !important;
background: #2b251e !important;
border-color: #5a4937 !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body #mw-content-text :where(input, textarea, select, button),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) #mw-content-text :where(input, textarea, select, button) {
color: var(--pvz-mobile-text) !important;
background: #2b251e !important;
border-color: #5a4937 !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(
.pvz-custom-toc,
.pvz-custom-mobile-tools,
.pvz-custom-mobile-tools-section,
.pvz-mobile-category-box .pvz-custom-mobile-tools-section,
.pvz-timeless-rail-card,
.pvz-timeless-rail-box,
.pvz-wide-rail-card,
.pvz-wide-rail-box,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(
.pvz-custom-toc,
.pvz-custom-mobile-tools,
.pvz-custom-mobile-tools-section,
.pvz-mobile-category-box .pvz-custom-mobile-tools-section,
.pvz-timeless-rail-card,
.pvz-timeless-rail-box,
.pvz-wide-rail-card,
.pvz-wide-rail-box,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk
) {
color: var(--pvz-mobile-text) !important;
background: #2b251e !important;
border-color: #5a4937 !important;
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(
.pvz-custom-mobile-tools-heading,
.pvz-timeless-rail-card h2,
.pvz-timeless-rail-box h2,
.pvz-wide-rail-card h2,
.pvz-wide-rail-box h2,
#mw-site-navigation .sidebar-chunk h2,
#mw-related-navigation .sidebar-chunk h2
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(
.pvz-custom-mobile-tools-heading,
.pvz-timeless-rail-card h2,
.pvz-timeless-rail-box h2,
.pvz-wide-rail-card h2,
.pvz-wide-rail-box h2,
#mw-site-navigation .sidebar-chunk h2,
#mw-related-navigation .sidebar-chunk h2
) {
color: var(--pvz-mobile-text) !important;
background: #352d23 !important;
border-color: #5a4937 !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(
.pvz-custom-mobile-tools-item a,
.pvz-custom-toc-item a,
.pvz-timeless-account-info-value,
.pvz-timeless-alert-empty,
.pvz-mobile-category-box .pvz-custom-mobile-tools-list::before,
.pvz-timeless-rail-card a,
.pvz-timeless-rail-box a,
.pvz-wide-rail-card a,
.pvz-wide-rail-box a,
#mw-site-navigation .sidebar-chunk a,
#mw-related-navigation .sidebar-chunk a
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(
.pvz-custom-mobile-tools-item a,
.pvz-custom-toc-item a,
.pvz-timeless-account-info-value,
.pvz-timeless-alert-empty,
.pvz-mobile-category-box .pvz-custom-mobile-tools-list::before,
.pvz-timeless-rail-card a,
.pvz-timeless-rail-box a,
.pvz-wide-rail-card a,
.pvz-wide-rail-box a,
#mw-site-navigation .sidebar-chunk a,
#mw-related-navigation .sidebar-chunk a
) {
color: var(--pvz-mobile-text) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(
.pvz-custom-mobile-tools-item a:hover,
.pvz-custom-toc-item a:hover,
.pvz-timeless-rail-card a:hover,
.pvz-timeless-rail-box a:hover,
.pvz-wide-rail-card a:hover,
.pvz-wide-rail-box a:hover
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(
.pvz-custom-mobile-tools-item a:hover,
.pvz-custom-toc-item a:hover,
.pvz-timeless-rail-card a:hover,
.pvz-timeless-rail-box a:hover,
.pvz-wide-rail-card a:hover,
.pvz-wide-rail-box a:hover
) {
color: var(--pvz-mobile-link) !important;
background: rgba(255, 255, 255, 0.07) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(
.pvz-custom-toc-toggle,
.pvz-timeless-account-info-label,
.pvz-custom-toc-number
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(
.pvz-custom-toc-toggle,
.pvz-timeless-account-info-label,
.pvz-custom-toc-number
) {
color: #d6c2aa !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body .pvz-custom-toc-toggle,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) .pvz-custom-toc-toggle {
background: rgba(255, 255, 255, 0.07) !important;
border-color: #5a4937 !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(
.pvz-search-suggestions,
.pvz-search-suggestion-link
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(
.pvz-search-suggestions,
.pvz-search-suggestion-link
) {
color: var(--pvz-mobile-text) !important;
background: #2b251e !important;
border-color: #5a4937 !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body .pvz-search-suggestion-link:hover,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) .pvz-search-suggestion-link:hover {
background: #352d23 !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless #mw-footer-container,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless #mw-footer-container,
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(#footer, .mw-footer, footer, #mw-footer, .mw-body-footer),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(#footer, .mw-footer, footer, #mw-footer, .mw-body-footer) {
color: var(--pvz-mobile-footer-text) !important;
background: var(--pvz-mobile-footer-bg) !important;
background-color: var(--pvz-mobile-footer-bg) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(#footer, .mw-footer, footer, #mw-footer, .mw-body-footer) *,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(#footer, .mw-footer, footer, #mw-footer, .mw-body-footer) * {
color: var(--pvz-mobile-footer-text) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body :where(#footer, .mw-footer, footer, #mw-footer, .mw-body-footer) a,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) :where(#footer, .mw-footer, footer, #mw-footer, .mw-body-footer) a {
color: var(--pvz-mobile-link) !important;
text-decoration-color: currentColor !important;
}
/* 다크 모드 전체 링크 색상 시작 */
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless :where(
#mw-content a,
#content a,
.mw-body a,
#mw-site-navigation a,
#mw-related-navigation a,
.pvz-custom-mobile-tools a,
.pvz-timeless-sheet a,
.pvz-timeless-wide-rail a,
.pvz-mobile-category-box a,
#catlinks a,
.catlinks a,
#mw-footer-container a,
.mw-footer a,
footer a,
.pvz-search-suggestion-link
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless :where(
#mw-content a,
#content a,
.mw-body a,
#mw-site-navigation a,
#mw-related-navigation a,
.pvz-custom-mobile-tools a,
.pvz-timeless-sheet a,
.pvz-timeless-wide-rail a,
.pvz-mobile-category-box a,
#catlinks a,
.catlinks a,
#mw-footer-container a,
.mw-footer a,
footer a,
.pvz-search-suggestion-link
) {
color: var(--pvz-mobile-link) !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless :where(
#mw-content a.new,
#content a.new,
.mw-body a.new,
.pvz-custom-mobile-tools a.new,
.pvz-timeless-sheet a.new,
#catlinks a.new,
.catlinks a.new
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless :where(
#mw-content a.new,
#content a.new,
.mw-body a.new,
.pvz-custom-mobile-tools a.new,
.pvz-timeless-sheet a.new,
#catlinks a.new,
.catlinks a.new
) {
color: #f0aaa3 !important;
}
/* 다크 모드 전체 링크 색상 끝 */
/* v172 모든 화면 다크 모드 대응 끝 */
/* =========================
v176 링크 hover 밑줄 전용 효과 시작
========================= */
html.pvz-timeless-mobile-ready body.skin-timeless a:hover,
html.pvz-timeless-mobile-ready body.skin-timeless a:focus-visible {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
text-decoration-line: underline !important;
text-decoration-style: solid !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
/*
링크 내부 아이콘·이미지는 그대로 두고,
실제 글자에만 밑줄이 보이도록 한다.
*/
html.pvz-timeless-mobile-ready body.skin-timeless a:hover :where(svg, img),
html.pvz-timeless-mobile-ready body.skin-timeless a:focus-visible :where(svg, img) {
text-decoration: none !important;
}
/* v176 링크 hover 밑줄 전용 효과 끝 */
/* =========================
v179 커스텀 검색바 시작
========================= */
/* 새 검색바가 준비되면 기존 MediaWiki/Timeless 검색 UI는 숨긴다. */
html.pvz-timeless-mobile-ready body.pvz-custom-search-ready.skin-timeless
#mw-header-container :where(
#p-search,
.mw-portlet-search,
.search-box,
#searchform,
.search-form
) {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* 커스텀 검색바 자체 */
html.pvz-timeless-mobile-ready body.skin-timeless #pvz-custom-searchbox {
position: absolute !important;
z-index: 101460 !important;
box-sizing: border-box !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: var(--pvz-search-text) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox.is-main-width {
left: var(--pvz-custom-search-left) !important;
right: auto !important;
width: var(--pvz-custom-search-width) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox-form {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-searchbox-field {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 36px !important;
align-items: center !important;
gap: 0 !important;
width: 100% !important;
height: 36px !important;
min-height: 36px !important;
margin: 0 !important;
padding: 0 4px 0 11px !important;
color: var(--pvz-search-text) !important;
background: var(--pvz-search-bg) !important;
border: 1px solid var(--pvz-search-border) !important;
border-radius: 7px !important;
box-shadow: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
transition:
border-color 160ms ease,
background-color 160ms ease !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-searchbox-field:focus-within {
border-color: var(--pvz-search-focus) !important;
box-shadow: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
color: var(--pvz-search-icon) !important;
pointer-events: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-icon svg {
display: block !important;
width: 20px !important;
height: 20px !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox-input {
appearance: none !important;
-webkit-appearance: none !important;
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
color: var(--pvz-search-text) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
font: inherit !important;
font-size: 0.94rem !important;
line-height: 1.2 !important;
caret-color: var(--pvz-search-focus) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox-input::placeholder {
color: var(--pvz-search-placeholder) !important;
opacity: 1 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox-input::-webkit-search-cancel-button {
cursor: pointer !important;
opacity: 0.7 !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-searchbox-submit {
appearance: none !important;
-webkit-appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: 36px !important;
height: 34px !important;
min-width: 36px !important;
margin: 0 !important;
padding: 0 4px 0 0 !important;
color: var(--pvz-search-icon) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
transition: color 150ms ease !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-searchbox-submit:hover,
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-searchbox-submit:focus-visible {
color: var(--pvz-search-focus) !important;
background: transparent !important;
text-decoration: none !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-searchbox-submit .pvz-custom-search-icon,
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-searchbox-submit .pvz-custom-search-icon svg {
width: 18px !important;
height: 18px !important;
}
/* 검색 제안 */
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox-suggestions {
position: absolute !important;
z-index: 101470 !important;
top: calc(100% + 5px) !important;
left: 0 !important;
right: 0 !important;
display: none !important;
width: 100% !important;
max-height: min(420px, calc(100vh - 118px)) !important;
margin: 0 !important;
padding: 5px !important;
color: var(--pvz-search-text) !important;
background: var(--pvz-search-suggestions-bg) !important;
border: 1px solid var(--pvz-search-border) !important;
border-radius: 7px !important;
box-shadow: 0 9px 24px var(--pvz-search-shadow) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox-suggestions.is-open:not([hidden]) {
display: block !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 7px 8px !important;
color: var(--pvz-search-text) !important;
background: transparent !important;
border: 0 !important;
border-radius: 5px !important;
box-shadow: none !important;
text-decoration: none !important;
box-sizing: border-box !important;
transition:
background-color 130ms ease,
transform 130ms ease !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion:hover {
color: var(--pvz-search-text) !important;
background: var(--pvz-search-suggestion-hover) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion.is-active {
color: var(--pvz-search-text) !important;
background: var(--pvz-search-suggestion-active) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion.is-pressed {
transform: translateX(5px) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion-thumb {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
overflow: visible !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion-thumb:not(.has-image)::before {
content: "" !important;
display: block !important;
width: 22px !important;
height: 22px !important;
border: 1px solid var(--pvz-search-divider) !important;
border-radius: 50% !important;
background: color-mix(
in srgb,
var(--pvz-search-button-bg) 72%,
transparent
) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion-thumb img {
display: block !important;
max-width: 38px !important;
max-height: 38px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
filter: drop-shadow(2px 3px 1px rgba(64, 48, 47, 0.25)) !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion-label {
min-width: 0 !important;
color: inherit !important;
font-size: 0.92rem !important;
line-height: 1.35 !important;
overflow-wrap: anywhere !important;
}
html.pvz-timeless-mobile-ready body.skin-timeless
#pvz-custom-searchbox .pvz-custom-search-suggestion-match {
color: inherit !important;
font-weight: 700 !important;
}
/* 1279px 이하: 헤더 내부 폭 100% */
@media (max-width: 1279px) {
html.pvz-timeless-mobile-ready body.skin-timeless #pvz-custom-searchbox {
top: auto !important;
bottom: var(--pvz-topbar-search-bottom-gap, 6px) !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
}
}
/* 정확히 1280px도 기존 모바일 2행 구조를 유지하되, 폭은 JS가 실제 본문창에 맞춘다. */
@media (min-width: 1280px) and (max-width: 1280px) {
html.pvz-timeless-mobile-ready body.skin-timeless #pvz-custom-searchbox {
top: auto !important;
bottom: var(--pvz-topbar-search-bottom-gap, 6px) !important;
}
}
/* 1281px 이상: 최상단바 안에 배치하고, 폭/좌표는 JS가 실제 본문창을 따라간다. */
@media (min-width: 1281px) {
html.pvz-timeless-mobile-ready body.skin-timeless #pvz-custom-searchbox {
top: 7px !important;
bottom: auto !important;
}
}
/* 다크 모드에서는 브라우저 기본 입력 UI까지 어두운 색 체계를 사용한다. */
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
) body.skin-timeless #pvz-custom-searchbox,
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-night,
.client-dark-mode,
.mw-theme-night,
.theme-dark,
.dark
).skin-timeless #pvz-custom-searchbox {
color-scheme: dark !important;
}
/* v179 커스텀 검색바 끝 */
/* =========================
v179 라이트 모드 footer 글자색 보정 시작
========================= */
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-day,
.client-light-mode,
.theme-light,
.light
) body.skin-timeless :where(
#footer,
.mw-footer,
footer,
#mw-footer,
.mw-body-footer
),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-day,
.client-light-mode,
.theme-light,
.light
).skin-timeless :where(
#footer,
.mw-footer,
footer,
#mw-footer,
.mw-body-footer
) {
color: #4b2a18 !important;
}
html.pvz-timeless-mobile-ready:is(
.skin-theme-clientpref-day,
.client-light-mode,
.theme-light,
.light
) body.skin-timeless :where(
#footer,
.mw-footer,
footer,
#mw-footer,
.mw-body-footer
) *:not(a),
html.pvz-timeless-mobile-ready body:is(
.skin-theme-clientpref-day,
.client-light-mode,
.theme-light,
.light
).skin-timeless :where(
#footer,
.mw-footer,
footer,
#mw-footer,
.mw-body-footer
) *:not(a) {
color: #4b2a18 !important;
}
/* v179 라이트 모드 footer 글자색 보정 끝 */
/* =========================
v180 기본 링크색 시작
========================= */
/*
인라인 style로 color를 직접 지정한 링크와 없는 문서 링크는 제외한다.
그 외 일반 링크는 모드별 --pvz-mobile-link 색을 기본값으로 사용한다.
*/
html.pvz-timeless-mobile-ready body.skin-timeless
a:not(.new):not([style*="color" i]),
html.pvz-timeless-mobile-ready body.skin-timeless
a:not(.new):not([style*="color" i]):visited {
color: var(--pvz-mobile-link);
}
/* v180 기본 링크색 끝 */
/* ===== theme.txt ===== */
/* =========================
MediaWiki:Gadget-pvz-core/theme.css
Vector 호환 최종본 / 폰트 분리 v5
- 문서 제목 리본: SB Aggro B
- 문단 제목 / 커스텀 목차 제목: SB Aggro M
- 커스텀 목차 항목: SB Aggro L
- 커스텀 목차 번호: SB Aggro B
========================= */
@font-face {
font-family: 'PVZ SB Aggro B';
src: url('/wiki/Special:Redirect/file/SB_Aggro_B.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PVZ SB Aggro M';
src: url('/wiki/Special:Redirect/file/SB_Aggro_M.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PVZ SB Aggro L';
src: url('/wiki/Special:Redirect/file/SB_Aggro_L.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* 기존 이름으로 작성된 문법 호환용 */
@font-face {
font-family: 'SB Aggro B';
src: url('/wiki/Special:Redirect/file/SB_Aggro_B.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SB Aggro M';
src: url('/wiki/Special:Redirect/file/SB_Aggro_M.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SB Aggro L';
src: url('/wiki/Special:Redirect/file/SB_Aggro_L.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
/* 문서 제목 리본용 */
--pvz-document-title-font: 'PVZ SB Aggro B', 'SB Aggro B', 'SB 어그로 B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-document-title-weight: normal;
/* 문단 제목 / '목차' 제목용 */
--pvz-section-title-font: 'PVZ SB Aggro M', 'SB Aggro M', 'SB 어그로 M', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-section-title-weight: normal;
/* 목차 항목 글자용 */
--pvz-toc-item-font: 'PVZ SB Aggro L', 'SB Aggro L', 'SB 어그로 L', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-toc-item-weight: normal;
/* 목차 번호용 */
--pvz-toc-number-font: 'PVZ SB Aggro B', 'SB Aggro B', 'SB 어그로 B', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--pvz-toc-number-weight: normal;
/* 기존 문법 호환용 */
--pvz-heading-font: var(--pvz-section-title-font);
}
/* =========================
위키 전체 이미지 투명 배경 보정
========================= */
/* 이미지 파일 자체에 배경색이 없을 때, 브라우저/스킨/CSS가 흰 배경을 깔지 않게 처리 */
.mw-body-content img,
.mw-parser-output img,
.mw-parser-output .image img,
.mw-parser-output .mw-file-element,
.mw-parser-output figure img,
.mw-parser-output .thumbimage,
.mw-parser-output .magnify,
.mw-parser-output .noviewer img {
background: transparent !important;
background-color: transparent !important;
}
/* 썸네일/파일 프레임이 흰색 판을 까는 경우 제거 */
.mw-parser-output .thumb,
.mw-parser-output .thumbinner,
.mw-parser-output figure,
.mw-parser-output figure[typeof~="mw:File"],
.mw-parser-output figure[typeof~="mw:Image"],
.mw-parser-output .mw-halign-left,
.mw-parser-output .mw-halign-right,
.mw-parser-output .mw-halign-center,
.mw-parser-output .mw-default-size {
background: transparent !important;
background-color: transparent !important;
}
/* 파일 페이지/미디어 뷰어 계열에서 이미지 뒤 흰 배경이 붙는 경우 보정 */
.fullImageLink,
.fullMedia,
.mw-filepage-resolutioninfo,
.mw-imagepage-section-filehistory,
.mw-imagepage-section-linkstoimage,
.mw-imagepage-section-globalusage {
background: transparent !important;
background-color: transparent !important;
}
/* 갤러리에서 투명 PNG가 흰색 칸 위에 뜨는 경우 보정 */
ul.gallery,
li.gallerybox,
li.gallerybox div.thumb,
.gallerybox .thumb,
.gallerybox .gallerytext {
background: transparent !important;
background-color: transparent !important;
}
/* 링크 안쪽 이미지에도 흰색 배경이 상속되지 않게 처리 */
a.image,
a.mw-file-description {
background: transparent !important;
background-color: transparent !important;
}
/* ===== ui.txt ===== */
/* =========================
MediaWiki:Gadget-pvz-core/components.css
Vector 호환 최종본 / 데스크톱 유틸리티바 SVG·구검색바 정리 v40
========================= */
/* SVG 아이콘 복구 */
.pvz-icon {
display: inline-block !important;
width: 1.45em !important;
height: 1.45em !important;
min-width: 1.45em !important;
min-height: 1.45em !important;
color: currentColor !important;
background-color: currentColor !important;
-webkit-mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
-webkit-mask-size: contain !important;
mask-repeat: no-repeat !important;
mask-position: center !important;
mask-size: contain !important;
vertical-align: -0.18em !important;
text-indent: -9999px !important;
overflow: hidden !important;
}
.pvz-icon::before,
.pvz-icon::after {
display: none !important;
content: none !important;
}
.pvz-icon-menu {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M3%206h18v2.4H3V6Zm0%205h18v2.4H3V11Zm0%205h18v2.4H3V16Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M3%206h18v2.4H3V6Zm0%205h18v2.4H3V11Zm0%205h18v2.4H3V16Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-settings {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M19.4%2013a7.7%207.7%200%200%200%200-2l2.1-1.6-2-3.5-2.5%201a8%208%200%200%200-1.7-1L15%203h-4l-.4%202.9a8%208%200%200%200-1.7%201l-2.5-1-2%203.5L6.6%2011a7.7%207.7%200%200%200%200%202l-2.2%201.6%202%203.5%202.5-1a8%208%200%200%200%201.7%201L11%2021h4l.4-2.9a8%208%200%200%200%201.7-1l2.5%201%202-3.5L19.4%2013ZM13%2012a1%201%200%201%201-2%200%201%201%200%200%201%202%200Zm2.5%200a3.5%203.5%200%201%201-7%200%203.5%203.5%200%200%201%207%200Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M19.4%2013a7.7%207.7%200%200%200%200-2l2.1-1.6-2-3.5-2.5%201a8%208%200%200%200-1.7-1L15%203h-4l-.4%202.9a8%208%200%200%200-1.7%201l-2.5-1-2%203.5L6.6%2011a7.7%207.7%200%200%200%200%202l-2.2%201.6%202%203.5%202.5-1a8%208%200%200%200%201.7%201L11%2021h4l.4-2.9a8%208%200%200%200%201.7-1l2.5%201%202-3.5L19.4%2013ZM13%2012a1%201%200%201%201-2%200%201%201%200%200%201%202%200Zm2.5%200a3.5%203.5%200%201%201-7%200%203.5%203.5%200%200%201%207%200Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-bell {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a5 5 0 0 0-5 5v2.1c0 1.1-.4 2.2-1.1 3L4.3 14a1 1 0 0 0 .7 1.7h14a1 1 0 0 0 .7-1.7l-1.6-1.9A4.8 4.8 0 0 1 17 9.1V7a5 5 0 0 0-5-5Zm0 20a3 3 0 0 0 2.8-2H9.2A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a5 5 0 0 0-5 5v2.1c0 1.1-.4 2.2-1.1 3L4.3 14a1 1 0 0 0 .7 1.7h14a1 1 0 0 0 .7-1.7l-1.6-1.9A4.8 4.8 0 0 1 17 9.1V7a5 5 0 0 0-5-5Zm0 20a3 3 0 0 0 2.8-2H9.2A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E") !important;
}
.pvz-icon-chevron-right {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9 5 7 7-7 7-1.8-1.8L12.4 12 7.2 6.8 9 5Z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9 5 7 7-7 7-1.8-1.8L12.4 12 7.2 6.8 9 5Z'/%3E%3C/svg%3E") !important;
}
.pvz-icon-chevron-left {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m15 5 1.8 1.8L11.6 12l5.2 5.2L15 19l-7-7 7-7Z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m15 5 1.8 1.8L11.6 12l5.2 5.2L15 19l-7-7 7-7Z'/%3E%3C/svg%3E") !important;
}
.pvz-icon-account {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2012a5%205%200%201%200%200-10%205%205%200%200%200%200%2010Zm0%202c-5.4%200-9%202.7-9%206v1h18v-1c0-3.3-3.6-6-9-6Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2012a5%205%200%201%200%200-10%205%205%200%200%200%200%2010Zm0%202c-5.4%200-9%202.7-9%206v1h18v-1c0-3.3-3.6-6-9-6Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-tools {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.2 18.6 13.9 11.3c.7-1.9.3-4.1-1.2-5.6-1.6-1.6-4-2-6-1.1l3.5 3.5-2.1 2.1-3.6-3.5c-.8 2-.4 4.4 1.2 6 1.5 1.5 3.7 1.9 5.6 1.2l7.3 7.3c.3.3.8.3 1.1 0l1.5-1.5c.3-.3.3-.8 0-1.1Z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.2 18.6 13.9 11.3c.7-1.9.3-4.1-1.2-5.6-1.6-1.6-4-2-6-1.1l3.5 3.5-2.1 2.1-3.6-3.5c-.8 2-.4 4.4 1.2 6 1.5 1.5 3.7 1.9 5.6 1.2l7.3 7.3c.3.3.8.3 1.1 0l1.5-1.5c.3-.3.3-.8 0-1.1Z'/%3E%3C/svg%3E") !important;
}
.pvz-icon-home {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M3%2011%2012%203l9%208v10h-6v-6H9v6H3V11Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M3%2011%2012%203l9%208v10h-6v-6H9v6H3V11Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-recent {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%204a8%208%200%201%201-7.4%205H2l4-4%204%204H6.8A5.9%205.9%200%201%200%2012%206V4Zm1%204v4l3%202-1.1%201.7-3.4-2.2A1%201%200%200%201%2011%2012V8h2Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%204a8%208%200%201%201-7.4%205H2l4-4%204%204H6.8A5.9%205.9%200%201%200%2012%206V4Zm1%204v4l3%202-1.1%201.7-3.4-2.2A1%201%200%200%201%2011%2012V8h2Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-random {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M16.5%203.5%2022%209l-5.5%205.5L11%209l5.5-5.5ZM7.5%209%2013%2014.5%207.5%2020%202%2014.5%207.5%209Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M16.5%203.5%2022%209l-5.5%205.5L11%209l5.5-5.5ZM7.5%209%2013%2014.5%207.5%2020%202%2014.5%207.5%209Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-help {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm-1%2016a1.2%201.2%200%201%201%202.4%200A1.2%201.2%200%200%201%2011%2018Zm1.2-3.2a1%201%200%200%201-1-1c0-1.7%201.1-2.4%202-3%20.8-.5%201.3-.9%201.3-1.8%200-.9-.8-1.6-1.9-1.6-1%200-1.8.5-2.3%201.6L8.5%208.1c.8-1.7%202.3-2.7%204.1-2.7%202.2%200%203.9%201.5%203.9%203.6%200%202.1-1.3%202.9-2.2%203.5-.8.5-1.1.7-1.1%201.3a1%201%200%200%201-1%201Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm-1%2016a1.2%201.2%200%201%201%202.4%200A1.2%201.2%200%200%201%2011%2018Zm1.2-3.2a1%201%200%200%201-1-1c0-1.7%201.1-2.4%202-3%20.8-.5%201.3-.9%201.3-1.8%200-.9-.8-1.6-1.9-1.6-1%200-1.8.5-2.3%201.6L8.5%208.1c.8-1.7%202.3-2.7%204.1-2.7%202.2%200%203.9%201.5%203.9%203.6%200%202.1-1.3%202.9-2.2%203.5-.8.5-1.1.7-1.1%201.3a1%201%200%200%201-1%201Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-special {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h16v4H4V4Zm0%206h16v10H4V10Zm3%202v2h10v-2H7Zm0%204v2h7v-2H7Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h16v4H4V4Zm0%206h16v10H4V10Zm3%202v2h10v-2H7Zm0%204v2h7v-2H7Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-upload {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%203%206.5%208.5%208%2010l3-3v9h2V7l3%203%201.5-1.5L12%203ZM4%2018h2v2h12v-2h2v4H4v-4Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%203%206.5%208.5%208%2010l3-3v9h2V7l3%203%201.5-1.5L12%203ZM4%2018h2v2h12v-2h2v4H4v-4Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-login {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M10%204h10v16H10v-2h8V6h-8V4Zm1.7%204.3%203.7%203.7-3.7%203.7-1.4-1.4%201.3-1.3H4v-2h7.6l-1.3-1.3%201.4-1.4Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M10%204h10v16H10v-2h8V6h-8V4Zm1.7%204.3%203.7%203.7-3.7%203.7-1.4-1.4%201.3-1.3H4v-2h7.6l-1.3-1.3%201.4-1.4Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-plus {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M11%205h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M11%205h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-extensions {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M9%202h6v5h5v6h-5v5H9v-5H4V7h5V2Zm1%2017h4v3h-4v-3Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M9%202h6v5h5v6h-5v5H9v-5H4V7h5V2Zm1%2017h4v3h-4v-3Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-namespace {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h16v4H4V4Zm0%206h7v10H4V10Zm9%200h7v10h-7V10Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h16v4H4V4Zm0%206h7v10H4V10Zm9%200h7v10h-7V10Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-permissions {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%202%204%205.5v6.2C4%2016.8%207.4%2021%2012%2022c4.6-1%208-5.2%208-10.3V5.5L12%202Zm3.7%208.7-4.2%204.2-3.2-3.2%201.4-1.4%201.8%201.8%203.5-3.5%201.4%201.4Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%202%204%205.5v6.2C4%2016.8%207.4%2021%2012%2022c4.6-1%208-5.2%208-10.3V5.5L12%202Zm3.7%208.7-4.2%204.2-3.2-3.2%201.4-1.4%201.8%201.8%203.5-3.5%201.4%201.4Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-backup {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M8.8%2019H7a5%205%200%201%201%201.1-9.9A6.5%206.5%200%200%201%2020.5%2011.5a3.8%203.8%200%200%201-.3%207.5H15v-4h3l-6-6-6%206h2.8v4Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M8.8%2019H7a5%205%200%201%201%201.1-9.9A6.5%206.5%200%200%201%2020.5%2011.5a3.8%203.8%200%200%201-.3%207.5H15v-4h3l-6-6-6%206h2.8v4Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-talk {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h16v13H9l-5%204v-4H2V6a2%202%200%200%201%202-2Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h16v13H9l-5%204v-4H2V6a2%202%200%200%201%202-2Z%22/%3E%3C/svg%3E") !important;
}
.pvz-icon-star {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22m12%202%202.9%206.2%206.6%201-4.8%204.7%201.2%206.7-5.9-3.2-5.9%203.2%201.2-6.7-4.8-4.8%206.6-.9L12%202Z%22/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22m12%202%202.9%206.2%206.6%201-4.8%204.7%201.2%206.7-5.9-3.2-5.9%203.2%201.2-6.7-4.8-4.8%206.6-.9L12%202Z%22/%3E%3C/svg%3E") !important;
}
/* 검색 추천 */
#pvz-search-suggestions,
.pvz-search-suggestions {
position: fixed !important;
z-index: 101300 !important;
display: none !important;
max-height: min(420px, calc(100vh - 96px)) !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 8px !important;
color: #182818 !important;
background: #f7fff3 !important;
border: 2px solid #479745 !important;
border-radius: 18px !important;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26) !important;
}
html.pvz-suggestions-open #pvz-search-suggestions,
html.pvz-suggestions-open .pvz-search-suggestions {
display: block !important;
}
.pvz-search-suggestions-list {
display: grid !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.pvz-search-suggestion {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.pvz-search-suggestion-link {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
min-height: 46px !important;
padding: 6px 8px !important;
color: #173417 !important;
text-decoration: none !important;
border-radius: 13px !important;
}
.pvz-search-suggestion-link:hover,
.pvz-search-suggestion.is-selected .pvz-search-suggestion-link {
background: #e8f7df !important;
}
.pvz-search-suggestion-thumb {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
overflow: visible !important;
}
.pvz-search-suggestion-thumb img {
display: block !important;
width: 34px !important;
height: 34px !important;
object-fit: contain !important;
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.22),
0 1px 2px rgba(0, 0, 0, 0.16) !important;
}
.pvz-search-suggestion-title {
min-width: 0 !important;
color: #173417 !important;
font-size: 0.98rem !important;
font-weight: 900 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.pvz-search-suggestion-match {
color: #1f6c2d !important;
font-weight: 950 !important;
}
/* 상단 패널 */
.pvz-mobile-panel-backdrop {
position: fixed !important;
inset: 0 !important;
z-index: 100950 !important;
display: none !important;
background: rgba(18, 32, 22, 0.32) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
html.pvz-mobile-panel-open .pvz-mobile-panel-backdrop {
display: block !important;
}
.pvz-mobile-sheet {
position: fixed !important;
top: calc(var(--pvz-mobile-custombar-height) + 10px) !important;
z-index: 101050 !important;
display: none !important;
width: calc(100vw - 22px) !important;
max-height: calc(100vh - var(--pvz-mobile-custombar-height) - 22px) !important;
padding: 18px !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
color: #08183d !important;
background: rgba(235, 241, 252, 0.97) !important;
border: 1px solid rgba(9, 28, 75, 0.13) !important;
border-radius: 22px !important;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
.pvz-mobile-sheet.is-open {
display: block !important;
}
.pvz-mobile-sheet-left {
left: 11px !important;
}
.pvz-mobile-sheet-right {
right: 11px !important;
}
.pvz-mobile-sheet-section {
margin: 0 0 22px 0 !important;
}
.pvz-mobile-sheet-section-title,
.pvz-mobile-setting-title {
margin: 0 0 10px 0 !important;
color: #193c78 !important;
font-size: 1rem !important;
font-weight: 900 !important;
}
.pvz-mobile-link-list {
display: grid !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.pvz-mobile-link-list a {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
min-height: 48px !important;
padding: 7px 8px !important;
color: #071646 !important;
text-decoration: none !important;
border-radius: 14px !important;
font-size: 1rem !important;
font-weight: 850 !important;
}
.pvz-mobile-link-list a:hover {
background: rgba(255, 255, 255, 0.62) !important;
}
.pvz-mobile-choice-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.pvz-mobile-choice-grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.pvz-mobile-choice {
min-height: 48px !important;
padding: 0 8px !important;
color: #203020 !important;
background: rgba(255, 255, 255, 0.38) !important;
border: 2px solid rgba(9, 28, 75, 0.10) !important;
border-radius: 14px !important;
font-size: 0.95rem !important;
font-weight: 900 !important;
cursor: pointer !important;
}
.pvz-mobile-choice.is-selected {
background: rgba(255, 255, 255, 0.62) !important;
border-color: #2f6fd4 !important;
box-shadow: 0 0 0 3px rgba(47, 111, 212, 0.14) !important;
}
.pvz-mobile-choice.dark {
color: #dce6f8 !important;
background: #111722 !important;
}
.pvz-mobile-account-card {
margin: 0 -18px 18px -18px !important;
padding: 20px 18px 18px 18px !important;
border-bottom: 1px solid rgba(9, 28, 75, 0.10) !important;
}
.pvz-mobile-account-name {
margin: 0 0 10px 0 !important;
color: #030712 !important;
font-size: 1.35rem !important;
font-weight: 950 !important;
}
.pvz-mobile-account-groups {
margin: 0 0 18px 0 !important;
color: #163b77 !important;
font-size: 0.95rem !important;
font-weight: 750 !important;
}
.pvz-mobile-account-stats {
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 6px 24px !important;
color: #030712 !important;
font-weight: 900 !important;
}
.pvz-mobile-account-stats span {
color: #163b77 !important;
font-weight: 800 !important;
}
.pvz-mobile-account-logout {
display: grid !important;
grid-template-columns: 42px 1fr !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
min-height: 54px !important;
margin: 16px 0 0 0 !important;
padding: 0 16px !important;
color: #fff !important;
background: #d90449 !important;
border: 0 !important;
border-radius: 16px !important;
text-decoration: none !important;
font-size: 1.05rem !important;
font-weight: 950 !important;
}
html.pvz-font-small { font-size: 16px; }
html.pvz-font-medium { font-size: 17px; }
html.pvz-font-large { font-size: 18px; }
html.pvz-width-normal {
--pvz-board-width: var(--pvz-board-width-normal);
}
html.pvz-width-wide {
--pvz-board-width: var(--pvz-board-width-wide);
}
html.pvz-performance-on * {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* =========================
v39 데스크톱 유틸리티바
- 기존 모바일 상단바와 분리하여 데스크톱 전용으로 강제 생성한 바를 표시
- 오른쪽 끝 기준: 계정 → 알림 → 검색바
- absolute 배치라 스크롤 시 따라 내려오지 않음
========================= */
@media (min-width: 721px) {
html body #pvz-desktop-utilitybar,
html body .pvz-desktop-utilitybar {
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
z-index: 2147482000 !important;
display: grid !important;
grid-template-columns: 280px 38px 38px !important;
grid-template-areas: "search alerts account" !important;
align-items: center !important;
gap: 7px !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(100vw - 12px) !important;
height: 50px !important;
margin: 0 !important;
padding: 7px 12px !important;
color: #ffffff !important;
background: #0e6b3f !important;
border: 0 !important;
border-radius: 0 0 0 16px !important;
box-shadow:
0 6px 16px rgba(20, 64, 32, 0.24),
inset 0 -1px 0 rgba(255,255,255,0.16) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
html body #pvz-desktop-utilitybar .pvz-desktop-search-form {
grid-area: search !important;
display: block !important;
width: 280px !important;
max-width: 280px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
}
html body #pvz-desktop-search-input {
display: block !important;
width: 100% !important;
height: 34px !important;
margin: 0 !important;
padding: 0 12px !important;
color: #203020 !important;
background: #fffbea !important;
border: 2px solid #0c5f37 !important;
border-radius: 2px !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.88rem !important;
font-weight: var(--pvz-toc-item-weight, 400) !important;
line-height: 1.2 !important;
box-shadow:
inset 0 1px 2px rgba(30,60,30,0.14),
0 1px 0 rgba(255,255,255,0.34) !important;
pointer-events: auto !important;
user-select: text !important;
}
html body #pvz-desktop-alerts-wrap {
grid-area: alerts !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html body #pvz-desktop-account-button {
grid-area: account !important;
}
html body #pvz-desktop-alerts-button,
html body #pvz-desktop-account-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
padding: 0 !important;
color: #fff5dc !important;
background: transparent !important;
border: 0 !important;
border-radius: 999px !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1 !important;
box-shadow: none !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html body #pvz-desktop-alerts-button .pvz-icon,
html body #pvz-desktop-account-button .pvz-icon {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
}
html body #pvz-desktop-alerts-button:hover,
html body #pvz-desktop-alerts-button:focus,
html body #pvz-desktop-account-button:hover,
html body #pvz-desktop-account-button:focus,
html body #pvz-desktop-alerts-wrap.is-open #pvz-desktop-alerts-button {
color: #ffffff !important;
background: rgba(255,255,255,0.16) !important;
outline: none !important;
}
html body #pvz-desktop-alerts-popover {
position: absolute !important;
top: calc(100% + 10px) !important;
right: -42px !important;
z-index: 2147482100 !important;
display: none !important;
width: 320px !important;
color: #2f382f !important;
background: #f6f8f3 !important;
border: 1px solid rgba(41, 91, 51, 0.28) !important;
border-radius: 14px !important;
box-shadow:
0 14px 32px rgba(18, 67, 31, 0.22),
inset 0 1px 0 rgba(255,255,255,0.72) !important;
overflow: hidden !important;
}
html body #pvz-desktop-alerts-wrap.is-open #pvz-desktop-alerts-popover {
display: block !important;
}
html body .pvz-desktop-alerts-popover-header {
padding: 12px 15px !important;
color: #215a31 !important;
background: #ffffff !important;
border-bottom: 1px solid rgba(41, 91, 51, 0.16) !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.96rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
}
html body .pvz-desktop-alerts-popover-body {
padding: 38px 18px !important;
color: #4f5c4f !important;
background: #f6f8f3 !important;
font-family: var(--pvz-toc-item-font) !important;
font-size: 0.86rem !important;
font-weight: var(--pvz-toc-item-weight, 400) !important;
text-align: center !important;
}
html body .pvz-desktop-alerts-popover-footer {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
border-top: 1px solid rgba(41, 91, 51, 0.16) !important;
}
html body .pvz-desktop-alerts-popover-footer a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
padding: 10px 14px !important;
color: #215a31 !important;
background: #ffffff !important;
border-right: 1px solid rgba(41, 91, 51, 0.16) !important;
font-family: var(--pvz-section-title-font) !important;
font-size: 0.84rem !important;
font-weight: var(--pvz-section-title-weight, 500) !important;
text-decoration: none !important;
}
html body .pvz-desktop-alerts-popover-footer a:last-child {
border-right: 0 !important;
}
}
@media (max-width: 720px) {
html body #pvz-desktop-utilitybar {
display: none !important;
}
}
/* ===== visual.txt ===== */
/* =========================
MediaWiki:Gadget-pvz-core/visual.css
Vector 호환 최종본 / 배경 이미지 override 제거 v24
- 전체 배경과 문서 내부 카드 색감만 담당
- 보드, 상단바, 목차, 분류 칸은 각각 board/components/content.css가 담당
========================= */
:root {
--pvz-main: #479745;
--pvz-main-dark: #2f7f3a;
--pvz-main-deep: #1f5f2a;
--pvz-text: #243024;
--pvz-text-soft: #607260;
--pvz-line: rgba(71,151,69,0.22);
}
html {
background-color: var(--pvz-wiki-bg-color) !important;
background-image: var(--pvz-wiki-bg-image) !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
background-attachment: fixed !important;
color: var(--pvz-text) !important;
}
body {
background-color: transparent !important;
background-image: none !important;
color: var(--pvz-text) !important;
}
.pvz-card {
background:
linear-gradient(135deg, rgba(255,255,255,0.80), rgba(242,253,235,0.78)) !important;
border-color: rgba(71,151,69,0.23) !important;
}
.pvz-mainbox {
background:
linear-gradient(135deg, #e8f7df, #fbfff4) !important;
border-color: rgba(71,151,69,0.32) !important;
}