MediaWiki:Common.css: Difference between revisions

Revision as of 20:27, 17 October 2026

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --bg:        #f9f6f0;
  --beige-1:   #f0ebe0;
  --beige-2:   #e2d9c8;
  --beige-3:   #c8b99a;
  --beige-4:   #a89070;
  --gold:      #c8a060;
  --gold-dark: #a07840;
  --ink:       #2a2218;
  --ink-soft:  #6b5e4e;
  --ink-muted: #9c8e80;
  --surface:   #ffffff;
}

body {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  padding-top: 100px !important;
}

h1, h2, h3, h4, h5, h6,
.firstHeading, #firstHeading {
  font-family: 'Inter', sans-serif !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* 링크 — 본문만 (헤더 링크 간섭 방지) */
#bodyContent a,
#bodyContent a:visited,
#footer a {
  color: var(--gold-dark) !important;
  text-decoration: none !important;
}
#bodyContent a:hover,
#footer a:hover {
  color: var(--gold) !important;
  text-decoration: underline !important;
}

/* Vector 기본 UI 전부 숨김 */
#mw-head,
#mw-panel,
#p-logo,
#mw-navigation,
#mw-head-base,
#mw-page-base {
  display: none !important;
}

#content,
.mw-body {
  margin: 0 !important;
  max-width: none !important;
  padding: 2rem 2rem 4rem !important;
  background: var(--bg) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.mw-body-content {
  border: none !important;
  outline: none !important;
}

#bodyContent {
  margin-top: 1.5rem !important;
}

#footer {
  background-color: var(--beige-1) !important;
  border-top: 1px solid var(--beige-2) !important;
  color: var(--ink-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

table.wikitable {
  background-color: var(--surface) !important;
  border-color: var(--beige-2) !important;
}
table.wikitable th {
  background-color: var(--beige-1) !important;
  color: var(--ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-color: var(--beige-2) !important;
}
table.wikitable td {
  border-color: var(--beige-2) !important;
}

hr {
  border-color: var(--beige-2) !important;
}

#catlinks {
  background-color: var(--beige-1) !important;
  border: 1px solid var(--beige-2) !important;
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ink-soft) !important;
}

/* ─── 3컬럼 레이아웃 ─── */
.erakh-layout {
  display: grid !important;
  grid-template-columns: 15% minmax(0, 1fr) 13% !important;
  align-items: start !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.erakh-layout.no-toc {
  grid-template-columns: minmax(0, 1fr) 13% !important;
}
.erakh-col-left {
  position: sticky !important;
  top: 100px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  border-right: 1px solid var(--beige-2) !important;
  padding: 1.5rem 1rem !important;
  background: var(--bg) !important;
}
.erakh-col-center {
  min-width: 0 !important;
}
.erakh-col-right {
  position: sticky !important;
  top: 100px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  border-left: 1px solid var(--beige-2) !important;
  background: var(--beige-1) !important;
  padding: 1.5rem 1rem !important;
}
.erakh-toc-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--beige-2) !important;
}
#toc {
  display: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}
#toctitle { display: none !important; }
#toc ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#toc li {
  padding: 0.25rem 0 0.25rem 0.5rem !important;
  border-left: 2px solid transparent !important;
  line-height: 1.4 !important;
}
#toc li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: var(--ink-soft) !important;
  text-decoration: none !important;
}
#toc li a:hover { color: var(--ink) !important; }
#toc .toclevel-2 { padding-left: 1.25rem !important; }
#toc .toclevel-2 a {
  font-size: 0.74rem !important;
  color: var(--ink-muted) !important;
}
#toc .toclevel-3 { padding-left: 2rem !important; }
#toc .toclevel-3 a { font-size: 0.72rem !important; }
.tocnumber {
  color: var(--ink-muted) !important;
  margin-right: 0.35rem !important;
}
.erakh-sidebar-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--beige-2) !important;
}
.erakh-sidebar-placeholder {
  border: 1.5px dashed var(--beige-3) !important;
  border-radius: 4px !important;
  padding: 1.25rem 0.75rem !important;
  text-align: center !important;
  color: var(--ink-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  line-height: 1.8 !important;
  margin-bottom: 0.75rem !important;
}

@media (max-width: 900px) {
  .erakh-layout,
  .erakh-layout.no-toc {
    grid-template-columns: minmax(0, 1fr) 13% !important;
  }
  .erakh-col-left { display: none !important; }
}
@media (max-width: 600px) {
  .erakh-layout,
  .erakh-layout.no-toc {
    grid-template-columns: 1fr !important;
  }
  .erakh-col-right { display: none !important; }
}
/* ─── Infobox ─── */
.erakh-infobox {
  float: right !important;
  clear: right !important;
  width: 220px !important;
  margin: 0 0 1rem 1.5rem !important;
  background: #f0ebe0 !important;
  border: 1px solid #e2d9c8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}
.erakh-ib-title {
  background: #2a2218 !important;
  color: #f9f6f0 !important;
  text-align: center !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em !important;
}
.erakh-ib-img {
  text-align: center !important;
  padding: 0.5rem !important;
  border-bottom: 1px solid #e2d9c8 !important;
  background: #e2d9c8 !important;
}
.erakh-ib-section {
  background: #e2d9c8 !important;
  color: #2a2218 !important;
  font-weight: 500 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.3rem 0.6rem !important;
  border-top: 1px solid #c8b99a !important;
  border-bottom: 1px solid #c8b99a !important;
}
.erakh-ib-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border: none !important;
}
.erakh-ib-table th {
  width: 72px !important;
  background: #ebe5d8 !important;
  color: #6b5e4e !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important;
  padding: 0.3rem 0.5rem !important;
  border: none !important;
  border-bottom: 1px solid #e2d9c8 !important;
  text-align: left !important;
  vertical-align: top !important;
}
.erakh-ib-table td {
  color: #2a2218 !important;
  font-size: 0.75rem !important;
  padding: 0.3rem 0.5rem !important;
  border: none !important;
  border-bottom: 1px solid #e2d9c8 !important;
  vertical-align: top !important;
}
/* ─── Special:Search 페이지 기본 검색 UI 전체 숨김 ─── */
.mw-search-form-wrapper,
.search-types,
.mw-search-top-table,
.mw-search-profile-form,
form#search {
  display: none !important;
}

/* Hide MW help link on category pages */
.mw-indicator-mw-helplink { display: none !important; }
.mw-indicator { display: none !important; }

/* ── Box 템플릿 ── */
.erakh-box {
    background: #ffffff;
    border: 1px solid #c8a060;
    border-left: 0.3em solid #a07840;
    padding: 1em 1.25em;
    margin: 1em 0;
    color: #2a2218;
    font-size: 1em;
    line-height: 1.7;
}

.erakh-box-source {
    display: block;
    margin-top: 0.625em;
    color: #6b5e4e;
    font-size: 0.9em;
}

/* 업로드 다이얼로그 크기 축소 */
.oo-ui-window-frame {
    max-height: 400px !important;
    height: 400px !important;
}

/* =====================================================================
   Erakh Codex — main page styles (added 2026-10-04)
   Used by the Main_Page wikitext (classes erakh-home, erakh-hero, erakh-card ...).
   Safe to leave in place when unused: every rule is scoped to these class names.
   ===================================================================== */

/* Icons: Tabler Icons v3.48.0 (outline), embedded as CSS masks.
   Source: https://github.com/tabler/tabler-icons
   Icons used: user, building, map, dna, clock, users, sword, book, diamond, info-circle

MIT License

Copyright (c) 2020-2026 Paweł Kuna

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
#bodyContent .erakh-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 auto 0.4rem;
  background-color: var(--gold);
  -webkit-mask-image: var(--erakh-icon);
  mask-image: var(--erakh-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#bodyContent .erakh-card-hl .erakh-icon { background-color: var(--gold-dark); }
#bodyContent .erakh-icon-user { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-building { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l18 0'/%3E%3Cpath d='M9 8l1 0'/%3E%3Cpath d='M9 12l1 0'/%3E%3Cpath d='M9 16l1 0'/%3E%3Cpath d='M14 8l1 0'/%3E%3Cpath d='M14 12l1 0'/%3E%3Cpath d='M14 16l1 0'/%3E%3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-map { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 -3l6 3l6 -3v13l-6 3l-6 -3l-6 3v-13'/%3E%3Cpath d='M9 4v13'/%3E%3Cpath d='M15 7v13'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-dna { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.828 14.828a4 4 0 1 0 -5.656 -5.656a4 4 0 0 0 5.656 5.656'/%3E%3Cpath d='M9.172 20.485a4 4 0 1 0 -5.657 -5.657'/%3E%3Cpath d='M14.828 3.515a4 4 0 0 0 5.657 5.657'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-clock { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-users { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M21 21v-2a4 4 0 0 0 -3 -3.85'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-sword { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4v5l-9 7l-4 4l-3 -3l4 -4l7 -9l5 0'/%3E%3Cpath d='M6.5 11.5l6 6'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-book { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6l0 13'/%3E%3Cpath d='M12 6l0 13'/%3E%3Cpath d='M21 6l0 13'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-diamond { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5h12l3 5l-8.5 9.5a.7 .7 0 0 1 -1 0l-8.5 -9.5l3 -5'/%3E%3Cpath d='M10 12l-2 -2.2l.6 -1'/%3E%3C/svg%3E"); }
#bodyContent .erakh-icon-info-circle { --erakh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E"); }

/* Page container */
#bodyContent .erakh-home {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
  box-sizing: border-box;
}
#bodyContent .erakh-home p { margin: 0; }

/* Hero */
#bodyContent .erakh-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--beige-1);
  border: 1px solid var(--beige-2);
  border-radius: 6px;
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
  box-sizing: border-box;
}
#bodyContent .erakh-hero h1 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 0.5rem 0;
  padding: 0;
  border: 0;
}
#bodyContent .erakh-hero-text p {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 480px;
}
#bodyContent .erakh-hero-stat {
  text-align: center;
  border-left: 1px solid var(--beige-3);
  padding-left: 2.5rem;
  flex-shrink: 0;
}
#bodyContent .erakh-hero-num {
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#bodyContent .erakh-hero-label {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* Section titles */
#bodyContent .erakh-section-title {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--beige-2);
}

/* Category cards (the whole card is clickable through the link's ::after) */
#bodyContent .erakh-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 2.5rem;
}
#bodyContent .erakh-card {
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--beige-2);
  border-radius: 6px;
  background: var(--surface);
  padding: 1rem 0.5rem;
  text-align: center;
}
#bodyContent .erakh-card:hover { background: var(--beige-1); border-color: var(--beige-3); }
#bodyContent .erakh-card:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
#bodyContent .erakh-card-hl { border: 1.5px solid var(--gold); background: #f5ede0; }
#bodyContent .erakh-card-hl:hover { background: #ede0cc; border-color: var(--gold-dark); }
#bodyContent .erakh-card-name { font-size: 0.75rem; font-weight: 500; }
#bodyContent .erakh-card-count {
  font-size: 0.65rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}
#bodyContent .erakh-card a,
#bodyContent .erakh-card a:visited,
#bodyContent .erakh-card a:hover {
  color: var(--ink) !important;
  text-decoration: none !important;
}
#bodyContent .erakh-card-hl a,
#bodyContent .erakh-card-hl a:visited,
#bodyContent .erakh-card-hl a:hover {
  color: var(--gold-dark) !important;
}
#bodyContent .erakh-card a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Two columns: welcome box + recent changes */
#bodyContent .erakh-home-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
#bodyContent .erakh-welcome {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--beige-2);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
}
#bodyContent .erakh-welcome .erakh-icon {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1rem 0 0 0;
  flex-shrink: 0;
}
#bodyContent .erakh-welcome-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
#bodyContent .erakh-welcome-text {
  font-size: 0.775rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
#bodyContent .erakh-welcome-text a { font-weight: 500; }

/* Recent changes box (filled by MediaWiki:Common.js) */
#bodyContent .erakh-recent {
  background: var(--surface);
  border: 1px solid var(--beige-2);
  border-radius: 6px;
  overflow: hidden;
}
#bodyContent .erakh-recent-msg {
  padding: 1rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
#bodyContent .erakh-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--beige-1);
}
#bodyContent .erakh-recent-row:last-child { border-bottom: 0; }
#bodyContent .erakh-recent-row:hover { background: var(--beige-1); }
#bodyContent a.erakh-recent-row:hover { text-decoration: none !important; }
#bodyContent .erakh-recent-title { font-size: 0.78rem; color: var(--ink); }
#bodyContent .erakh-recent-date {
  font-size: 0.7rem;
  color: var(--ink-muted);
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Narrow screens */
@media (max-width: 640px) {
  #bodyContent .erakh-home { padding: 1.5rem 1rem 3rem; }
  #bodyContent .erakh-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }
  #bodyContent .erakh-hero-stat {
    text-align: left;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--beige-3);
    padding-top: 1rem;
  }
  #bodyContent .erakh-home-cols { grid-template-columns: minmax(0, 1fr); }
}