|
|
| 1번째 줄: |
1번째 줄: |
| /* ===== 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 숨김 */
| |
| html.pvz-desktop-booting body.skin-vector #mw-page-base,
| |
| html.pvz-desktop-booting body.skin-vector #mw-head-base,
| |
| html.pvz-desktop-booting body.skin-vector #mw-head,
| |
| html.pvz-desktop-booting body.skin-vector #mw-panel,
| |
| html.pvz-desktop-booting body.skin-vector #p-personal,
| |
| html.pvz-desktop-booting body.skin-vector #p-search,
| |
| html.pvz-desktop-booting body.skin-vector #left-navigation,
| |
| html.pvz-desktop-booting body.skin-vector #right-navigation,
| |
| html.pvz-desktop-booting body.skin-vector .vector-header-container,
| |
| html.pvz-desktop-booting body.skin-vector .vector-sticky-header,
| |
| html.pvz-desktop-booting body.skin-vector .vector-main-menu-landmark,
| |
| html.pvz-desktop-booting body.skin-vector .vector-column-start,
| |
| html.pvz-desktop-booting body.skin-vector .vector-page-toolbar,
| |
| html.pvz-desktop-booting body.skin-vector .vector-page-titlebar,
| |
| html.pvz-desktop-booting body.skin-vector .vector-page-titlebar-toc,
| |
| html.pvz-desktop-booting body.skin-vector .vector-toc-landmark,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #mw-page-base,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #mw-head-base,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #mw-head,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #mw-panel,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #p-personal,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #p-search,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #left-navigation,
| |
| html.pvz-desktop-booting body.skin-vector-2022 #right-navigation,
| |
| html.pvz-desktop-booting body.skin-vector-2022 .vector-header-container,
| |
| html.pvz-desktop-booting body.skin-vector-2022 .vector-sticky-header,
| |
| html.pvz-desktop-booting body.skin-vector-2022 .vector-main-menu-landmark,
| |
| html.pvz-desktop-booting body.skin-vector-2022 .vector-column-start,
| |
| html.pvz-desktop-booting body.skin-vector-2022 .vector-page-toolbar,
| |
| html.pvz-desktop-booting body.skin-vector-2022 .vector-page-titlebar,
| |
| html.pvz-desktop-booting body.skin-vector-2022 .vector-page-titlebar-toc,
| |
| html.pvz-desktop-booting 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.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector-2022 {
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector #content,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector .mw-body,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector #bodyContent,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector-2022 #content,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector-2022 .mw-body,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector-2022 #bodyContent {
| |
| visibility: hidden !important;
| |
| }
| |
|
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector #mw-page-base,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector #mw-head-base,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector #mw-head,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector #mw-panel,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector-2022 #mw-page-base,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector-2022 #mw-head-base,
| |
| html.pvz-desktop-booting:not(.pvz-desktop-booted) body.skin-vector-2022 #mw-head,
| |
| html.pvz-desktop-booting: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;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* =========================
| |
| 문단 제목 / 커스텀 목차 폰트
| |
| ========================= */
| |
|
| |
| @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;
| |
| }
| |
|
| |
| /* ===== 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,
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* ===== 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;
| |
| }
| |